SASS справочник

Безплатно

Търсим, удобен за печат справочник за Sass / SCSS — променливи, влагане, @use модули, миксини, функции, контрол на потока и вградени модули. Безплатно.

Променливи

$primary: #1d6f42;

Декларира променлива

$radius: 4px !default;

Задава само ако още не е дефинирана

$theme: dark !global;

Присвоява в глобалния обхват отвътре на блок

.box { $w: 10px; width: $w; }

Локална променлива с обхват в блока

$font-stack: 'Inter', sans-serif;

Стойност низ / списък

$gap: 8px * 2;

Променливите могат да съдържат изчислени стойности

color: $primary;

Използва променлива като стойност на свойство

$sizes: 4px, 8px, 16px;

Променлива-списък, разделена със запетаи

$config: ('gap': 8px);

Променлива-карта (двойки ключ/стойност)

$on: true;

Булева променлива за управление на потока

Влагане

.card { .title { color: red; } }

Влага селектор в неговия родител

.btn { &:hover { opacity: .8; } }

& препраща към родителския селектор

.btn { &.is-active {} }

Съставен родителски селектор с &

.list { & + & { margin-top: 8px; } }

Правило за съседен елемент с &

.menu { .dark & { color: #fff; } }

Поставя & накрая, за да добави контекст отпред

.box { font: { size: 14px; weight: 700; } }

Вложени свойства за пространство от имена (font-*)

.grid { > .col {} }

Вложен дъщерен комбинатор

@media (min-width: 768px) { .col { width: 50%; } }

Влага media заявки и в правило

.a { color: red; .b & { color: blue; } }

Пренарежда контекста чрез преместване на &

Частични файлове и модули

_base.scss

Частичен файл (водеща долна черта, не се компилира самостоятелно)

@use 'base';

Зарежда модул (с пространство по име на файл)

base.$primary;

Достъп до член през неговото пространство от имена

@use 'base' as b;

Зарежда модул под персонализирано пространство от имена

@use 'base' as *;

Зарежда в глобалното пространство от имена (без префикс)

@use 'theme' with ($primary: #000);

Конфигурира !default променливите на модул при зареждане

@forward 'buttons';

Реекспортира модул от входна точка

@forward 'buttons' as btn-*;

Препраща членове с префикс

@forward 'src/list' hide list-reset;

Препраща, но скрива конкретни членове

@forward 'config' with ($gap: 4px !default);

Препраща и задава конфигурируеми стойности по подразбиране

Mixin-и

@mixin reset { margin: 0; padding: 0; }

Дефинира преизползваем блок от декларации

@include reset;

Прилага mixin

@mixin pad($x) { padding: $x; }

Mixin с аргумент

@include pad(8px);

Подава аргумент при включване

@mixin pad($x: 4px) { padding: $x; }

Аргумент със стойност по подразбиране

@include pad($x: 12px);

Подава аргумент по ключова дума

@mixin shadow($a...) { box-shadow: $a; }

Произволни (променливи) аргументи

@mixin card { border: 1px solid; @content; }

Приема @content блок

@include card { color: red; }

Подава блок в @content на mixin-а

@mixin on-dark { @content; }

Обвива произволни правила, подадени през @content

Функции

@function double($n) { @return $n * 2; }

Дефинира функция, която връща стойност

width: double(8px);

Извиква персонализирана функция

@function pad($x: 4px) { @return $x; }

Функция с аргумент по подразбиране

@function sum($a, $b) { @return $a + $b; }

Няколко аргумента

@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }

Функциите могат да съдържат управление на потока

@use 'sass:math';

Импортира вграден модул за употреба във функции

@function half($n) { @return math.div($n, 2); }

Използва функции от модул във вашите собствени

@function list-len($l) { @return list.length($l); }

Функциите могат да обвиват вградени

margin: sum(4px, 8px);

Използва върнатата стойност като стойност на свойство

Оператори и математика

@use 'sass:math';

Зарежда модула math за деление

width: math.div(100%, 3);

Деление (math.div, не отмененото /)

width: 100% - 20px;

Изваждане

margin: 4px + 4px;

Събиране

width: 2 * 8px;

Умножение

$r: 10 % 3;

Модул (остатък)

@if $a == $b {}

Сравнение за равенство

@if $a >= 768px {}

Сравнение по-голямо-или-равно

@if $a and $b {}

Логическо и

@if not $disabled {}

Логическо отрицание

Управление на потока

@if $on { display: block; }

Условен блок

@else if $alt { display: flex; }

Допълнително условие

@else { display: none; }

Резервен клон

@each $c in red, green, blue {}

Обхожда списък

@each $name, $val in $map {}

Обхожда ключовете и стойностите на карта

@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }

Генерира правила от карта

@for $i from 1 through 3 {}

Цикъл, включващ крайната стойност

@for $i from 0 to 3 {}

Цикъл, изключващ крайната стойност

@while $i > 0 { $i: $i - 1; }

Цикъл докато условие е вярно

Вградени модули

@use 'sass:math'; math.floor(4.7)

Закръгля надолу до най-близкото цяло число

math.ceil(4.1)

Закръгля нагоре до най-близкото цяло число

math.round(4.5)

Закръгля до най-близкото цяло число

math.percentage(math.div(1, 4))

Преобразува безразмерно съотношение в процент

@use 'sass:string'; string.to-upper-case('hi')

Прави низа с главни букви

string.quote(hello)

Обвива стойност в кавички

@use 'sass:color'; color.adjust($c, $lightness: 10%)

Коригира канал на цвят с дадена стойност

color.scale($c, $lightness: 20%)

Мащабира канал на цвят плавно

color.mix($a, $b, 50%)

Смесва два цвята

@use 'sass:list'; list.length($l)

Брой елементи в списък

list.nth($l, 1)

Връща n-тия елемент (от 1)

@use 'sass:map'; map.get($m, 'gap')

Чете стойност от карта по ключ

map.merge($a, $b)

Слива две карти

map.keys($m)

Връща списък с ключовете на карта

Заместители и наследяване

%card { border: 1px solid; }

Селектор-заместител (не се извежда самостоятелно)

.box { @extend %card; }

Наследява стиловете на заместител

.alert { color: red; }

Нормален селектор за разширяване

.error { @extend .alert; }

Разширява реален селектор

.note { @extend .alert !optional; }

!optional: без грешка, ако целта липсва

%btn-base { padding: 8px; }

Споделя база между много бутони

.btn-primary { @extend %btn-base; }

Няколко селектора споделят едно правило чрез @extend

.btn-ghost { @extend %btn-base; }

Всяко разширение се групира в изхода

@include card;

Предпочитайте mixin-и пред @extend за параметризирано преизползване

Интерполация и разни

.icon-#{$name} { content: ''; }

Интерполира променлива в селектор

width: calc(100% - #{$gap});

Интерполира Sass стойност в calc()

content: '#{$count} items';

Интерполира вътре в низ

--bs-#{$key}: #{$val};

Изгражда динамично CSS персонализирани свойства

$map: ('sm': 576px, 'md': 768px);

Дефинира карта от двойки ключ/стойност

map.get($map, 'md')

Чете стойност от карта (чрез sass:map)

@debug $value;

Отпечатва стойност в конзолата по време на компилация

@warn 'deprecated';

Извежда предупреждение по време на компилация

@error 'invalid input';

Прекъсва компилацията с грешка

// inline comment

Тих коментар (премахва се от изхода)

/* block comment */

CSS коментар (запазва се в компресиран изход при /*! )

@import 'base';

Стар import — отменен, предпочитайте @use / @forward

Няма запис, който да съответства на „:q“.

Нуждаете се от помощ?

Открихте проблем с този инструмент? Кажете ни.

Докладване на проблем

Добавете този безплатен инструмент към собствения си уебсайт — копирайте и поставете кода по-долу.

<iframe src="https://tweakee.com/bg/studio/dev/sass-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>