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;
Déclarer une variable
$radius: 4px !default;
Définir seulement si non encore défini
$theme: dark !global;
Affecter à la portée globale depuis un bloc
.box { $w: 10px; width: $w; }
Variable locale, limitée au bloc
$font-stack: 'Inter', sans-serif;
Valeur chaîne / liste
$gap: 8px * 2;
Les variables peuvent contenir des valeurs calculées
color: $primary;
Utiliser une variable comme valeur de propriété
$sizes: 4px, 8px, 16px;
Une variable liste séparée par des virgules
$config: ('gap': 8px);
Une variable map (paires clé/valeur)
$on: true;
Variable booléenne pour le contrôle de flux
Imbrication
9.card { .title { color: red; } }
Imbriquer un sélecteur dans son parent
.btn { &:hover { opacity: .8; } }
& fait référence au sélecteur parent
.btn { &.is-active {} }
Sélecteur parent composé avec &
.list { & + & { margin-top: 8px; } }
Règle frère adjacent avec &
.menu { .dark & { color: #fff; } }
Placer & à la fin pour préfixer un contexte
.box { font: { size: 14px; weight: 700; } }
Propriétés imbriquées pour un namespace (font-*)
.grid { > .col {} }
Combinateur enfant imbriqué
@media (min-width: 768px) { .col { width: 50%; } }
Imbriquer aussi des media queries dans une règle
.a { color: red; .b & { color: blue; } }
Réordonner le contexte en déplaçant &
Partiels et modules
10_base.scss
Fichier partiel (underscore initial, pas compilé seul)
@use 'base';
Charger un module (namespacé par nom de fichier)
base.$primary;
Accéder à un membre via son namespace
@use 'base' as b;
Charger un module sous un namespace personnalisé
@use 'base' as *;
Charger dans le namespace global (sans préfixe)
@use 'theme' with ($primary: #000);
Configurer les variables !default d'un module au chargement
@forward 'buttons';
Réexporter un module depuis un point d'entrée
@forward 'buttons' as btn-*;
Transférer des membres avec un préfixe
@forward 'src/list' hide list-reset;
Transférer mais masquer certains membres
@forward 'config' with ($gap: 4px !default);
Transférer et définir des valeurs par défaut configurables
Mixins
10@mixin reset { margin: 0; padding: 0; }
Définir un bloc de déclarations réutilisable
@include reset;
Appliquer un mixin
@mixin pad($x) { padding: $x; }
Mixin avec un argument
@include pad(8px);
Passer un argument lors de l'inclusion
@mixin pad($x: 4px) { padding: $x; }
Argument avec une valeur par défaut
@include pad($x: 12px);
Passer un argument par mot-clé
@mixin shadow($a...) { box-shadow: $a; }
Arguments arbitraires (variables)
@mixin card { border: 1px solid; @content; }
Accepter un bloc @content
@include card { color: red; }
Passer un bloc dans le @content du mixin
@mixin on-dark { @content; }
Encapsuler des règles arbitraires via @content
Fonctions
9@function double($n) { @return $n * 2; }
Définir une fonction qui renvoie une valeur
width: double(8px);
Appeler une fonction personnalisée
@function pad($x: 4px) { @return $x; }
Fonction avec argument par défaut
@function sum($a, $b) { @return $a + $b; }
Plusieurs arguments
@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }
Les fonctions peuvent contenir du contrôle de flux
@use 'sass:math';
Importer un module intégré pour les fonctions
@function half($n) { @return math.div($n, 2); }
Utiliser des fonctions de module dans les vôtres
@function list-len($l) { @return list.length($l); }
Les fonctions peuvent encapsuler des fonctions intégrées
margin: sum(4px, 8px);
Utiliser la valeur renvoyée comme valeur de propriété
Opérateurs et maths
10@use 'sass:math';
Charger le module math pour la division
width: math.div(100%, 3);
Division (math.div, pas le / déprécié)
width: 100% - 20px;
Soustraction
margin: 4px + 4px;
Addition
width: 2 * 8px;
Multiplication
$r: 10 % 3;
Modulo (reste)
@if $a == $b {}
Comparaison d'égalité
@if $a >= 768px {}
Comparaison supérieur ou égal
@if $a and $b {}
ET logique
@if not $disabled {}
Négation logique
Flux de contrôle
9@if $on { display: block; }
Bloc conditionnel
@else if $alt { display: flex; }
Condition supplémentaire
@else { display: none; }
Branche par défaut
@each $c in red, green, blue {}
Itérer sur une liste
@each $name, $val in $map {}
Itérer sur les clés et valeurs d'une map
@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }
Générer des règles à partir d'une map
@for $i from 1 through 3 {}
Boucle incluant la valeur de fin
@for $i from 0 to 3 {}
Boucle excluant la valeur de fin
@while $i > 0 { $i: $i - 1; }
Boucler tant qu'une condition tient
Modules intégrés
14@use 'sass:math'; math.floor(4.7)
Arrondir à l'entier inférieur
math.ceil(4.1)
Arrondir à l'entier supérieur
math.round(4.5)
Arrondir à l'entier le plus proche
math.percentage(math.div(1, 4))
Convertir un ratio sans unité en pourcentage
@use 'sass:string'; string.to-upper-case('hi')
Mettre une chaîne en majuscules
string.quote(hello)
Entourer une valeur de guillemets
@use 'sass:color'; color.adjust($c, $lightness: 10%)
Ajuster un canal de couleur d'une valeur
color.scale($c, $lightness: 20%)
Mettre à l'échelle un canal de couleur de façon fluide
color.mix($a, $b, 50%)
Mélanger deux couleurs
@use 'sass:list'; list.length($l)
Nombre d'éléments dans une liste
list.nth($l, 1)
Obtenir le n-ième élément (base 1)
@use 'sass:map'; map.get($m, 'gap')
Lire une valeur d'une map par clé
map.merge($a, $b)
Fusionner deux maps
map.keys($m)
Obtenir la liste des clés d'une map
Placeholders et héritage
9%card { border: 1px solid; }
Sélecteur placeholder (non émis seul)
.box { @extend %card; }
Hériter des styles d'un placeholder
.alert { color: red; }
Un sélecteur normal à étendre
.error { @extend .alert; }
Étendre un sélecteur réel
.note { @extend .alert !optional; }
!optional : pas d'erreur si la cible est absente
%btn-base { padding: 8px; }
Partager une base entre de nombreux boutons
.btn-primary { @extend %btn-base; }
Plusieurs sélecteurs partagent une règle via @extend
.btn-ghost { @extend %btn-base; }
Chaque extension est groupée dans la sortie
@include card;
Préférer les mixins à @extend pour la réutilisation paramétrée
Interpolation et divers
12.icon-#{$name} { content: ''; }
Interpoler une variable dans un sélecteur
width: calc(100% - #{$gap});
Interpoler une valeur Sass dans calc()
content: '#{$count} items';
Interpoler dans une chaîne
--bs-#{$key}: #{$val};
Construire des propriétés CSS personnalisées dynamiquement
$map: ('sm': 576px, 'md': 768px);
Définir une map de paires clé/valeur
map.get($map, 'md')
Lire une valeur de map (via sass:map)
@debug $value;
Afficher une valeur dans la console à la compilation
@warn 'deprecated';
Émettre un avertissement à la compilation
@error 'invalid input';
Arrêter la compilation avec une erreur
// inline comment
Commentaire silencieux (retiré de la sortie)
/* block comment */
Commentaire CSS (conservé en sortie compressée si /*! )
@import 'base';
Import hérité — déprécié, préférez @use / @forward
Aucune entrée ne correspond à « :q ».
Besoin d'aide ?
Un problème avec cet outil ? Signalez-le à notre équipe.