Scheda di riferimento SASS
Un riferimento Sass / SCSS stampabile e ricercabile — variabili, annidamento, moduli @use, mixin, funzioni, controllo del flusso e moduli integrati. Gratis.
Variables
10$primary: #1d6f42;
Declare a variable
$radius: 4px !default;
Set only if not already defined
$theme: dark !global;
Assign to the global scope from inside a block
.box { $w: 10px; width: $w; }
Local variable, scoped to the block
$font-stack: 'Inter', sans-serif;
String / list value
$gap: 8px * 2;
Variables can hold computed values
color: $primary;
Use a variable as a property value
$sizes: 4px, 8px, 16px;
A comma-separated list variable
$config: ('gap': 8px);
A map variable (key/value pairs)
$on: true;
Boolean variable for control flow
Nesting
9.card { .title { color: red; } }
Nest a selector inside its parent
.btn { &:hover { opacity: .8; } }
& refers to the parent selector
.btn { &.is-active {} }
Compound parent selector with &
.list { & + & { margin-top: 8px; } }
Adjacent-sibling rule using &
.menu { .dark & { color: #fff; } }
Place & last to prepend a context
.box { font: { size: 14px; weight: 700; } }
Nested properties for a namespace (font-*)
.grid { > .col {} }
Nested child combinator
@media (min-width: 768px) { .col { width: 50%; } }
Nest media queries inside a rule too
.a { color: red; .b & { color: blue; } }
Reorder context by moving &
Partials & modules
10_base.scss
Partial file (leading underscore, not compiled alone)
@use 'base';
Load a module (namespaced by file name)
base.$primary;
Access a member through its namespace
@use 'base' as b;
Load a module under a custom namespace
@use 'base' as *;
Load into the global namespace (no prefix)
@use 'theme' with ($primary: #000);
Configure a module's !default variables on load
@forward 'buttons';
Re-export a module from an entrypoint
@forward 'buttons' as btn-*;
Forward members with a prefix
@forward 'src/list' hide list-reset;
Forward but hide specific members
@forward 'config' with ($gap: 4px !default);
Forward and set configurable defaults
Mixins
10@mixin reset { margin: 0; padding: 0; }
Define a reusable block of declarations
@include reset;
Apply a mixin
@mixin pad($x) { padding: $x; }
Mixin with an argument
@include pad(8px);
Pass an argument when including
@mixin pad($x: 4px) { padding: $x; }
Argument with a default value
@include pad($x: 12px);
Pass an argument by keyword
@mixin shadow($a...) { box-shadow: $a; }
Arbitrary (variable) arguments
@mixin card { border: 1px solid; @content; }
Accept a @content block
@include card { color: red; }
Pass a block into the mixin's @content
@mixin on-dark { @content; }
Wrap arbitrary rules passed via @content
Functions
9@function double($n) { @return $n * 2; }
Define a function that returns a value
width: double(8px);
Call a custom function
@function pad($x: 4px) { @return $x; }
Function with a default argument
@function sum($a, $b) { @return $a + $b; }
Multiple arguments
@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }
Functions may contain control flow
@use 'sass:math';
Import a built-in module for use in functions
@function half($n) { @return math.div($n, 2); }
Use module functions inside your own
@function list-len($l) { @return list.length($l); }
Functions can wrap built-ins
margin: sum(4px, 8px);
Use the returned value as a property value
Operators & math
10@use 'sass:math';
Load the math module for division
width: math.div(100%, 3);
Division (math.div, not the deprecated /)
width: 100% - 20px;
Subtraction
margin: 4px + 4px;
Addition
width: 2 * 8px;
Multiplication
$r: 10 % 3;
Modulo (remainder)
@if $a == $b {}
Equality comparison
@if $a >= 768px {}
Greater-than-or-equal comparison
@if $a and $b {}
Logical and
@if not $disabled {}
Logical negation
Control flow
9@if $on { display: block; }
Conditional block
@else if $alt { display: flex; }
Additional condition
@else { display: none; }
Fallback branch
@each $c in red, green, blue {}
Iterate over a list
@each $name, $val in $map {}
Iterate over a map's keys and values
@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }
Generate rules from a map
@for $i from 1 through 3 {}
Loop inclusive of the end value
@for $i from 0 to 3 {}
Loop exclusive of the end value
@while $i > 0 { $i: $i - 1; }
Loop while a condition holds
Built-in modules
14@use 'sass:math'; math.floor(4.7)
Round down to the nearest integer
math.ceil(4.1)
Round up to the nearest integer
math.round(4.5)
Round to the nearest integer
math.percentage(math.div(1, 4))
Convert a unitless ratio to a percentage
@use 'sass:string'; string.to-upper-case('hi')
Uppercase a string
string.quote(hello)
Wrap a value in quotes
@use 'sass:color'; color.adjust($c, $lightness: 10%)
Adjust a colour channel by an amount
color.scale($c, $lightness: 20%)
Scale a colour channel fluidly
color.mix($a, $b, 50%)
Blend two colours
@use 'sass:list'; list.length($l)
Number of items in a list
list.nth($l, 1)
Get the nth item (1-based)
@use 'sass:map'; map.get($m, 'gap')
Read a value from a map by key
map.merge($a, $b)
Merge two maps
map.keys($m)
Get a list of a map's keys
Placeholders & inheritance
9%card { border: 1px solid; }
Placeholder selector (not output on its own)
.box { @extend %card; }
Inherit a placeholder's styles
.alert { color: red; }
A normal selector to extend
.error { @extend .alert; }
Extend a real selector
.note { @extend .alert !optional; }
!optional: do not error if the target is missing
%btn-base { padding: 8px; }
Share a base across many buttons
.btn-primary { @extend %btn-base; }
Multiple selectors share one rule via @extend
.btn-ghost { @extend %btn-base; }
Each extension is grouped in the output
@include card;
Prefer mixins over @extend for parameterised reuse
Interpolation & misc
12.icon-#{$name} { content: ''; }
Interpolate a variable into a selector
width: calc(100% - #{$gap});
Interpolate a Sass value inside calc()
content: '#{$count} items';
Interpolate inside a string
--bs-#{$key}: #{$val};
Build CSS custom properties dynamically
$map: ('sm': 576px, 'md': 768px);
Define a map of key/value pairs
map.get($map, 'md')
Read a map value (via sass:map)
@debug $value;
Print a value to the console while compiling
@warn 'deprecated';
Emit a compile-time warning
@error 'invalid input';
Abort compilation with an error
// inline comment
Silent comment (stripped from output)
/* block comment */
CSS comment (kept in compressed output if /*! )
@import 'base';
Legacy import — deprecated, prefer @use / @forward
Nessuna voce corrisponde a “:q”.
Informazioni su Scheda di riferimento SASS
Questa cheat sheet Sass / SCSS copre il preprocessore dalla sintassi all'architettura: variabili, nesting, partial e moduli, mixin, funzioni, operatori e matematica, controllo di flusso, moduli integrati, placeholder ed ereditarietà, e interpolazione con altre varie funzionalità.
Rispecchia il modo in cui si scrive il Sass moderno — il sistema di moduli @use e i moduli integrati con namespace accanto alle funzionalità classiche — così è ugualmente utile per mantenere un vecchio codebase basato su @import e per scrivere nuovi fogli di stile basati su moduli.
La scheda è gratuita e resa lato client. Filtra ogni snippet in tempo reale con la casella di ricerca, salta a una sezione dal sommario fisso, clicca su qualsiasi snippet per copiarlo nel tuo foglio di stile e stampa la pagina per un riferimento SCSS cartaceo.
Come usare Scheda di riferimento SASS
- Scorri le sezioni, da Variabili e Nesting attraverso Mixin fino a Moduli integrati.
- Cerca una funzionalità come mixin, @use o map per filtrare la scheda in tempo reale.
- Passa a Controllo di flusso o Placeholder ed ereditarietà tramite la barra laterale fissa.
- Clicca su uno snippet o sulla sua icona di copia per copiare l'SCSS nel tuo foglio di stile.
- Stampa la scheda se preferisci un riferimento cartaceo mentre rifattorizzi gli stili.
Domande frequenti
Dieci sezioni: variabili, nesting, partial e moduli, mixin, funzioni, operatori e matematica, controllo di flusso, moduli integrati, placeholder ed ereditarietà, e interpolazione più varie.
Sì. La sezione su partial e moduli mostra le importazioni basate su @use e il namespacing, e la sezione sui moduli integrati elenca le funzioni standard con namespace usate nel Sass moderno.
Entrambi sono nella scheda: i mixin vengono inclusi con @include e possono accettare argomenti, mentre i placeholder vengono estesi con @extend e condividono un unico selettore generato. Le sezioni pertinenti mostrano la sintassi di ciascuno.
Sì. Clicca su qualsiasi snippet SCSS o sulla sua icona di copia al passaggio del mouse e viene copiato negli appunti con una breve conferma.
Sì, completamente gratuito — client-side, ricercabile e stampabile senza account.
Ricerche popolari
sass cheat sheet
scss syntax reference
sass mixins example
sass variables
sass nesting rules
use vs import sass
sass built-in modules
sass each and for loops
Hai bisogno di aiuto?
Hai riscontrato un problema con questo strumento? Faccelo sapere.