Scheda di riferimento SASS
Un riferimento Sass / SCSS stampabile e ricercabile — variabili, annidamento, moduli @use, mixin, funzioni, controllo del flusso e moduli integrati. Gratis.
Variabili
10$primary: #1d6f42;
Dichiara una variabile
$radius: 4px !default;
Imposta solo se non già definita
$theme: dark !global;
Assegna all'ambito globale dall'interno di un blocco
.box { $w: 10px; width: $w; }
Variabile locale, con ambito al blocco
$font-stack: 'Inter', sans-serif;
Valore stringa / lista
$gap: 8px * 2;
Le variabili possono contenere valori calcolati
color: $primary;
Usa una variabile come valore di proprietà
$sizes: 4px, 8px, 16px;
Una variabile lista separata da virgole
$config: ('gap': 8px);
Una variabile map (coppie chiave/valore)
$on: true;
Variabile booleana per il controllo di flusso
Annidamento
9.card { .title { color: red; } }
Annida un selettore dentro il suo genitore
.btn { &:hover { opacity: .8; } }
& si riferisce al selettore genitore
.btn { &.is-active {} }
Selettore genitore composto con &
.list { & + & { margin-top: 8px; } }
Regola sibling adiacente con &
.menu { .dark & { color: #fff; } }
Posiziona & alla fine per anteporre un contesto
.box { font: { size: 14px; weight: 700; } }
Proprietà annidate per un namespace (font-*)
.grid { > .col {} }
Combinatore figlio annidato
@media (min-width: 768px) { .col { width: 50%; } }
Annida anche le media query dentro una regola
.a { color: red; .b & { color: blue; } }
Riordina il contesto spostando &
Partial e moduli
10_base.scss
File partial (underscore iniziale, non compilato da solo)
@use 'base';
Carica un modulo (con namespace dal nome del file)
base.$primary;
Accede a un membro tramite il suo namespace
@use 'base' as b;
Carica un modulo sotto un namespace personalizzato
@use 'base' as *;
Carica nel namespace globale (senza prefisso)
@use 'theme' with ($primary: #000);
Configura le variabili !default di un modulo al caricamento
@forward 'buttons';
Ri-esporta un modulo da un entrypoint
@forward 'buttons' as btn-*;
Inoltra i membri con un prefisso
@forward 'src/list' hide list-reset;
Inoltra ma nasconde membri specifici
@forward 'config' with ($gap: 4px !default);
Inoltra e imposta default configurabili
Mixin
10@mixin reset { margin: 0; padding: 0; }
Definisce un blocco riutilizzabile di dichiarazioni
@include reset;
Applica un mixin
@mixin pad($x) { padding: $x; }
Mixin con un argomento
@include pad(8px);
Passa un argomento durante l'inclusione
@mixin pad($x: 4px) { padding: $x; }
Argomento con un valore predefinito
@include pad($x: 12px);
Passa un argomento per keyword
@mixin shadow($a...) { box-shadow: $a; }
Argomenti arbitrari (variabili)
@mixin card { border: 1px solid; @content; }
Accetta un blocco @content
@include card { color: red; }
Passa un blocco nel @content del mixin
@mixin on-dark { @content; }
Avvolge regole arbitrarie passate tramite @content
Funzioni
9@function double($n) { @return $n * 2; }
Definisce una funzione che restituisce un valore
width: double(8px);
Chiama una funzione personalizzata
@function pad($x: 4px) { @return $x; }
Funzione con un argomento predefinito
@function sum($a, $b) { @return $a + $b; }
Argomenti multipli
@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }
Le funzioni possono contenere controllo di flusso
@use 'sass:math';
Importa un modulo integrato per l'uso nelle funzioni
@function half($n) { @return math.div($n, 2); }
Usa funzioni di modulo all'interno delle proprie
@function list-len($l) { @return list.length($l); }
Le funzioni possono avvolgere quelle integrate
margin: sum(4px, 8px);
Usa il valore restituito come valore di proprietà
Operatori e matematica
10@use 'sass:math';
Carica il modulo math per la divisione
width: math.div(100%, 3);
Divisione (math.div, non il deprecato /)
width: 100% - 20px;
Sottrazione
margin: 4px + 4px;
Addizione
width: 2 * 8px;
Moltiplicazione
$r: 10 % 3;
Modulo (resto)
@if $a == $b {}
Confronto di uguaglianza
@if $a >= 768px {}
Confronto maggiore o uguale
@if $a and $b {}
And logico
@if not $disabled {}
Negazione logica
Controllo di flusso
9@if $on { display: block; }
Blocco condizionale
@else if $alt { display: flex; }
Condizione aggiuntiva
@else { display: none; }
Ramo di fallback
@each $c in red, green, blue {}
Itera su una lista
@each $name, $val in $map {}
Itera sulle chiavi e valori di una map
@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }
Genera regole da una map
@for $i from 1 through 3 {}
Ciclo che include il valore finale
@for $i from 0 to 3 {}
Ciclo che esclude il valore finale
@while $i > 0 { $i: $i - 1; }
Cicla finché una condizione è vera
Moduli integrati
14@use 'sass:math'; math.floor(4.7)
Arrotonda per difetto all'intero più vicino
math.ceil(4.1)
Arrotonda per eccesso all'intero più vicino
math.round(4.5)
Arrotonda all'intero più vicino
math.percentage(math.div(1, 4))
Converte un rapporto senza unità in percentuale
@use 'sass:string'; string.to-upper-case('hi')
Converte una stringa in maiuscolo
string.quote(hello)
Racchiude un valore tra virgolette
@use 'sass:color'; color.adjust($c, $lightness: 10%)
Regola un canale colore di una certa quantità
color.scale($c, $lightness: 20%)
Scala fluidamente un canale colore
color.mix($a, $b, 50%)
Miscela due colori
@use 'sass:list'; list.length($l)
Numero di elementi in una lista
list.nth($l, 1)
Ottiene l'n-esimo elemento (base 1)
@use 'sass:map'; map.get($m, 'gap')
Legge un valore da una map per chiave
map.merge($a, $b)
Unisce due map
map.keys($m)
Ottiene una lista delle chiavi di una map
Placeholder ed ereditarietà
9%card { border: 1px solid; }
Selettore placeholder (non emesso da solo)
.box { @extend %card; }
Eredita gli stili di un placeholder
.alert { color: red; }
Un normale selettore da estendere
.error { @extend .alert; }
Estende un selettore reale
.note { @extend .alert !optional; }
!optional: nessun errore se il target manca
%btn-base { padding: 8px; }
Condivide una base tra molti pulsanti
.btn-primary { @extend %btn-base; }
Più selettori condividono una regola tramite @extend
.btn-ghost { @extend %btn-base; }
Ogni estensione è raggruppata nell'output
@include card;
Preferisci i mixin a @extend per il riuso parametrizzato
Interpolazione e varie
12.icon-#{$name} { content: ''; }
Interpola una variabile in un selettore
width: calc(100% - #{$gap});
Interpola un valore Sass dentro calc()
content: '#{$count} items';
Interpola dentro una stringa
--bs-#{$key}: #{$val};
Costruisce dinamicamente proprietà CSS personalizzate
$map: ('sm': 576px, 'md': 768px);
Definisce una map di coppie chiave/valore
map.get($map, 'md')
Legge un valore di map (tramite sass:map)
@debug $value;
Stampa un valore sulla console durante la compilazione
@warn 'deprecated';
Emette un avviso in fase di compilazione
@error 'invalid input';
Interrompe la compilazione con un errore
// inline comment
Commento silenzioso (rimosso dall'output)
/* block comment */
Commento CSS (mantenuto nell'output compresso se /*! )
@import 'base';
Import legacy — deprecato, preferisci @use / @forward
Nessuna voce corrisponde a “:q”.
Hai bisogno di aiuto?
Hai riscontrato un problema con questo strumento? Faccelo sapere.