Aide-mémoire SASS
Une référence Sass / SCSS imprimable et consultable — variables, imbrication, modules @use, mixins, fonctions, structures de contrôle et modules intégrés. Gratuit.
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
Aucune entrée ne correspond à « :q ».
À propos de Aide-mémoire SASS
Cet aide-mémoire Sass / SCSS couvre le préprocesseur de la syntaxe à l'architecture : variables, imbrication, partiels et modules, mixins, fonctions, opérateurs et calculs, structures de contrôle, modules intégrés, placeholders et héritage, et interpolation avec autres particularités.
Il reflète la façon dont Sass s'écrit aujourd'hui — le système de modules @use et les modules intégrés à espace de noms aux côtés des fonctionnalités classiques — donc il est tout aussi utile pour maintenir une base de code @import ancienne que pour écrire de nouvelles feuilles de style basées sur des modules.
La fiche est gratuite et rendue côté client. Filtrez chaque extrait en direct avec le champ de recherche, sautez vers une section depuis le sommaire flottant, cliquez sur n'importe quel extrait pour le copier dans votre feuille de style et imprimez la page pour une référence SCSS papier.
Comment utiliser Aide-mémoire SASS
- Parcourez les sections, de Variables et Imbrication jusqu'à Mixins puis Modules intégrés.
- Recherchez une fonctionnalité comme mixin, @use ou map pour filtrer la fiche en direct.
- Sautez vers Structures de contrôle ou Placeholders & héritage via la barre latérale flottante.
- Cliquez sur un extrait ou son icône de copie pour copier le SCSS dans votre feuille de style.
- Imprimez la fiche si vous préférez une référence papier pendant que vous refactorisez vos styles.
Questions fréquentes
Dix sections : variables, imbrication, partiels et modules, mixins, fonctions, opérateurs et calculs, structures de contrôle, modules intégrés, placeholders et héritage, et interpolation plus particularités diverses.
Oui. La section partiels et modules montre les imports basés sur @use et l'espace de noms, et la section modules intégrés liste les fonctions standard à espace de noms utilisées dans le Sass moderne.
Les deux figurent sur la fiche : les mixins s'incluent avec @include et peuvent prendre des arguments, tandis que les placeholders s'étendent avec @extend et partagent un unique sélecteur généré. Les sections correspondantes montrent la syntaxe de chacun.
Oui. Cliquez sur n'importe quel extrait SCSS ou son icône de copie au survol et il est copié dans votre presse-papiers avec une brève confirmation.
Oui, entièrement gratuite — côté client, consultable par recherche et imprimable sans compte.
Recherches populaires
sass cheat sheet
référence de syntaxe scss
exemple de mixins sass
variables sass
règles d'imbrication sass
use vs import sass
modules intégrés sass
boucles each et for sass
Besoin d'aide ?
Un problème avec cet outil ? Signalez-le à notre équipe.