Foaie de referință SASS

Gratuit

O referință Sass / SCSS căutabilă și imprimabilă — variabile, imbricare, module @use, mixin-uri, funcții, controlul fluxului și module integrate. Gratuit.

Variabile

$primary: #1d6f42;

Declară o variabilă

$radius: 4px !default;

Setează doar dacă nu e deja definit

$theme: dark !global;

Atribuie domeniului global din interiorul unui bloc

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

Variabilă locală, limitată la bloc

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

Valoare șir / listă

$gap: 8px * 2;

Variabilele pot conține valori calculate

color: $primary;

Folosește o variabilă ca valoare de proprietate

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

O variabilă listă separată prin virgule

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

O variabilă map (perechi cheie/valoare)

$on: true;

Variabilă booleană pentru flux de control

Imbricare

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

Imbrică un selector în interiorul părintelui său

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

& se referă la selectorul părinte

.btn { &.is-active {} }

Selector părinte compus cu &

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

Regulă sibling adiacent folosind &

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

Pune & la final pentru a adăuga un context înainte

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

Proprietăți imbricate pentru un namespace (font-*)

.grid { > .col {} }

Combinator copil imbricat

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

Imbrică și media queries în interiorul unei reguli

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

Reordonează contextul mutând &

Partials și module

_base.scss

Fișier partial (underscore inițial, necompilat singur)

@use 'base';

Încarcă un modul (namespace după numele fișierului)

base.$primary;

Accesează un membru prin namespace-ul său

@use 'base' as b;

Încarcă un modul sub un namespace personalizat

@use 'base' as *;

Încarcă în namespace-ul global (fără prefix)

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

Configurează variabilele !default ale unui modul la încărcare

@forward 'buttons';

Reexportă un modul dintr-un punct de intrare

@forward 'buttons' as btn-*;

Forwardează membri cu un prefix

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

Forwardează dar ascunde anumiți membri

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

Forwardează și setează valori implicite configurabile

Mixin-uri

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

Definește un bloc reutilizabil de declarații

@include reset;

Aplică un mixin

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

Mixin cu un argument

@include pad(8px);

Pasează un argument la includere

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

Argument cu o valoare implicită

@include pad($x: 12px);

Pasează un argument după cuvânt-cheie

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

Argumente arbitrare (variabile)

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

Acceptă un bloc @content

@include card { color: red; }

Pasează un bloc în @content-ul mixin-ului

@mixin on-dark { @content; }

Învelește reguli arbitrare pasate prin @content

Funcții

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

Definește o funcție care returnează o valoare

width: double(8px);

Apelează o funcție personalizată

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

Funcție cu un argument implicit

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

Argumente multiple

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

Funcțiile pot conține flux de control

@use 'sass:math';

Importă un modul încorporat pentru utilizare în funcții

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

Folosește funcțiile modulului în propriile funcții

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

Funcțiile pot înveli funcții încorporate

margin: sum(4px, 8px);

Folosește valoarea returnată ca valoare de proprietate

Operatori și matematică

@use 'sass:math';

Încarcă modulul math pentru împărțire

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

Împărțire (math.div, nu / depreciat)

width: 100% - 20px;

Scădere

margin: 4px + 4px;

Adunare

width: 2 * 8px;

Înmulțire

$r: 10 % 3;

Modulo (rest)

@if $a == $b {}

Comparație de egalitate

@if $a >= 768px {}

Comparație mai mare sau egal

@if $a and $b {}

Și logic

@if not $disabled {}

Negație logică

Flux de control

@if $on { display: block; }

Bloc condițional

@else if $alt { display: flex; }

Condiție suplimentară

@else { display: none; }

Ramură de rezervă

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

Iterează peste o listă

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

Iterează peste cheile și valorile unui map

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

Generează reguli dintr-un map

@for $i from 1 through 3 {}

Buclă inclusiv valoarea finală

@for $i from 0 to 3 {}

Buclă exclusiv valoarea finală

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

Buclă cât timp condiția e adevărată

Module încorporate

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

Rotunjește în jos la cel mai apropiat întreg

math.ceil(4.1)

Rotunjește în sus la cel mai apropiat întreg

math.round(4.5)

Rotunjește la cel mai apropiat întreg

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

Convertește un raport fără unitate într-un procent

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

Transformă un șir în majuscule

string.quote(hello)

Învelește o valoare în ghilimele

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

Ajustează un canal de culoare cu o cantitate

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

Scalează fluid un canal de culoare

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

Amestecă două culori

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

Numărul de elemente dintr-o listă

list.nth($l, 1)

Obține al n-lea element (bazat pe 1)

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

Citește o valoare dintr-un map după cheie

map.merge($a, $b)

Combină două map-uri

map.keys($m)

Obține o listă a cheilor unui map

Placeholder-e și moștenire

%card { border: 1px solid; }

Selector placeholder (nu e emis de unul singur)

.box { @extend %card; }

Moștenește stilurile unui placeholder

.alert { color: red; }

Un selector normal de extins

.error { @extend .alert; }

Extinde un selector real

.note { @extend .alert !optional; }

!optional: nu da eroare dacă ținta lipsește

%btn-base { padding: 8px; }

Partajează o bază între mai multe butoane

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

Mai mulți selectori partajează o regulă prin @extend

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

Fiecare extensie e grupată în ieșire

@include card;

Preferă mixin-urile față de @extend pentru reutilizare parametrizată

Interpolare și diverse

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

Interpolează o variabilă într-un selector

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

Interpolează o valoare Sass în calc()

content: '#{$count} items';

Interpolează în interiorul unui șir

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

Construiește proprietăți CSS personalizate dinamic

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

Definește un map de perechi cheie/valoare

map.get($map, 'md')

Citește o valoare de map (prin sass:map)

@debug $value;

Afișează o valoare în consolă în timpul compilării

@warn 'deprecated';

Emite un avertisment la compilare

@error 'invalid input';

Abandonează compilarea cu o eroare

// inline comment

Comentariu silențios (eliminat din ieșire)

/* block comment */

Comentariu CSS (păstrat în ieșirea comprimată dacă /*! )

@import 'base';

Import legacy — depreciat, preferă @use / @forward

Nicio intrare nu corespunde cu „:q”.

Ai nevoie de ajutor?

Ai întâmpinat o problemă cu acest instrument? Spune-ne.

Raportează o problemă

Adăugați acest instrument gratuit pe propriul site — copiați și lipiți codul de mai jos.

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