Шпаргалка по SASS
Доступный для поиска и печати справочник по Sass / SCSS — переменные, вложенность, модули @use, миксины, функции, управление потоком и встроенные модули. Бесплатно.
Переменные
10$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;
Логическая переменная для управления потоком
Вложенность
9.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%; } }
Вкладывать медиа-запросы в правило тоже
.a { color: red; .b & { color: blue; } }
Изменить порядок контекста перемещением &
Частичные файлы и модули
10_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);
Реэкспортировать с настройкой значений по умолчанию
Миксины
10@mixin reset { margin: 0; padding: 0; }
Определить переиспользуемый блок объявлений
@include reset;
Применить миксин
@mixin pad($x) { padding: $x; }
Миксин с аргументом
@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 on-dark { @content; }
Обернуть произвольные правила из @content
Функции
9@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);
Использовать возвращённое значение как значение свойства
Операторы и математика
10@use 'sass:math';
Загрузить модуль math для деления
width: math.div(100%, 3);
Деление (math.div, не устаревший /)
width: 100% - 20px;
Вычитание
margin: 4px + 4px;
Сложение
width: 2 * 8px;
Умножение
$r: 10 % 3;
Остаток от деления (modulo)
@if $a == $b {}
Сравнение на равенство
@if $a >= 768px {}
Сравнение «больше или равно»
@if $a and $b {}
Логическое И
@if not $disabled {}
Логическое отрицание
Управление потоком
9@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; }
Цикл, пока условие истинно
Встроенные модули
14@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)
Получить список ключей карты
Заполнители и наследование
9%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;
Для параметризации предпочитать миксины, а не @extend
Интерполяция и прочее
12.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».
Нужна помощь?
Возникла проблема с этим инструментом? Сообщите нам.