Шпаргалка з 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%; } }

Вкладати медіазапити всередині правила теж

.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 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

Функції

@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;

Надавайте перевагу міксинам перед @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/uk/studio/dev/sass-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>