Sass 26 termes

!default assigne une valeur seulement si la variable n'existe pas encore (idéal pour les librairies). !global rend une variable locale accessible dans le scope global.

!default c'est 'sauf avis contraire', !global c'est 'je crie pour que tout le monde entende'.

// Librairie
$primary: blue !default; // Overridable
$border-radius: 4px !default;

// Projet utilisateur (avant @use)
$primary: red; // Override la valeur

// !global (a eviter si possible)
@mixin set-theme($color) {
  $theme-color: $color !global;
}

Cas d'usage : Créer des librairies Sass configurables ou les utilisateurs peuvent overrider les valeurs par défaut.

Architecture de fichiers Sass en 7 dossiers (abstracts, base, components, layout, pages, themes, vendors) et 1 fichier main.scss qui les importe tous.

Un classeur avec 7 intercalaires et une table des matières : tout est range et facile a trouver.

sass/
  abstracts/  (_variables, _mixins, _functions)
  base/       (_reset, _typography)
  components/ (_button, _card, _modal)
  layout/     (_header, _footer, _grid)
  pages/      (_home, _about)
  themes/     (_dark, _light)
  vendors/    (_bootstrap)
  main.scss   (importe tout)

Cas d'usage : Organiser un projet CSS moyen/grand pour que chaque développeur sache ou trouver et ajouter du code.

Directive qui échappe au nesting pour générer le sélecteur a la racine du fichier CSS. Utile pour créer des sélecteurs frères ou globaux depuis un contexte imbrique.

Sortir de l'immeuble pour planter un arbre dans le jardin commun, pas sur ton balcon.

.card {
  color: black;
  @at-root .theme-dark #{&} {
    color: white;
  }
}
// CSS: .theme-dark .card { color: white; }

Cas d'usage : Générer des sélecteurs de theme ou de contexte sans casser la structure du nesting.

Boucles Sass pour générer du CSS dynamiquement. @each itere sur des listes/maps, @for sur une plage numérique, @while tant qu'une condition est vraie.

Des machines qui produisent des variantes en série : même modèle, différentes couleurs/tailles.

$colors: (primary: #3498db, danger: #e74c3c);

@each $name, $color in $colors {
  .btn-#{$name} {
    background: $color;
    &:hover { background: darken($color, 10%); }
  }
}

Cas d'usage : Générer automatiquement des variantes de composants (couleurs, tailles, états) a partir de maps.

Directive qui fait hériter un sélecteur des styles d'un autre. Le sélecteur étendu est ajoute au sélecteur source dans le CSS compile (groupement de sélecteurs).

Copier les gènes d'un parent : l'enfant hérité de toutes les caractéristiques sans duplication.

.message {
  padding: 1rem;
  border: 1px solid;
  border-radius: 4px;
}
.success { @extend .message; border-color: green; }
.error { @extend .message; border-color: red; }
// CSS: .message, .success, .error { padding... }

Cas d'usage : Éviter la duplication CSS quand plusieurs sélecteurs partagent un ensemble commun de styles.

@use importe un module Sass avec un espace de noms (module.$var), et peut le configurer avec with(). @forward réexporte les membres d'un module pour créer des points d'entrée. Migration automatique : sass-migrator module --migrate-deps entrée.scss.

@use c'est importer un outil, @forward c'est le mettre en vitrine dans ta boutique pour les autres.

// _colors.scss
$primary: blue !default;

// _index.scss
@forward 'colors';

// component.scss
@use 'settings' with ($primary: navy); // configure
.btn { color: settings.$primary; }
// ou @use 'settings' as *;  // => $primary sans préfixe

Cas d'usage : Remplacer @import (déprécie) par un système de modules avec namespaces et encapsulation.

Convention de nommage Block__Élément--Modifier combinée avec le nesting Sass et le caractère &. Créé des classes plates et prévisibles.

Un système d'adresse : Immeuble__Appartement--Variante (card__title--large).

.card {
  padding: 1rem;
  &__header { border-bottom: 1px solid #eee; }
  &__title { font-size: 1.25rem; }
  &--featured {
    border-color: gold;
    .card__title { color: gold; }
  }
}

Cas d'usage : Nommer les classes CSS de façon prévisible et éviter les conflits de spécificité.

Modules integres de Sass (sass:color, sass:math, sass:string, sass:list, sass:map) qui fournissent des fonctions utilitaires sans installation supplémentaire.

La boite a outils livrée avec ta maison : tournevis, marteau, tout est la de base.

@use 'sass:color';
@use 'sass:math';
@use 'sass:list';

$light: color.adjust(#3498db, $lightness: 20%);
$half: math.div(100%, 2);
$mixed: color.mix(red, blue, 50%);
$first: list.nth((a, b, c), 1); // a

Cas d'usage : Manipuler couleurs, nombres, listes et maps sans dépendances externes.

Fonctions du module sass:color pour manipuler les couleurs. Les anciennes fonctions à canal unique (lighten, darken, saturate, adjust-hue, opacify…) et les accesseurs (red, hue, lightness…) sont dépréciés depuis Dart Sass 1.79.0 et retirés dans Dart Sass 2.0 : on utilise color.adjust, color.scale et color.channel, qui gèrent les espaces CSS Color 4 (oklch, display-p3).

Un peintre qui éclaircit, assombrit ou mélange ses couleurs sur sa palette.

@use 'sass:color';

$base: #3498db;
// DÉPRÉCIÉ : lighten($base, 15%)
$lighter: color.adjust($base, $lightness: 15%);
$darker: color.scale($base, $lightness: -30%);
$blend: color.mix($base, white, 80%);
$l: color.channel($base, 'lightness', $space: oklch);

Cas d'usage : Générer des palettes de couleurs dérivées automatiquement a partir d'une couleur de base.

Mécanisme qui permet a un mixin de recevoir un bloc de CSS via @content. Le bloc est injecte a l'endroit ou @content est appelé dans le mixin.

Un gabarit avec un trou : tu remplis le trou avec le contenu que tu veux a chaque utilisation.

@mixin on-hover {
  &:hover, &:focus-visible {
    @content;
  }
}

.button {
  background: blue;
  @include on-hover {
    background: darkblue;
    transform: scale(1.05);
  }
}

Cas d'usage : Créer des mixins de contexte (média queries, pseudo-sélecteurs) qui encapsulent un pattern.

Version majeure annoncée le 22 septembre 2026 et attendue en décembre 2026. Elle transforme la plupart des dépréciations en erreurs (fonctions couleur à canal unique, ancienne syntaxe if()…, sauf @import et les fonctions globales, reportés à Dart Sass 3) et aligne / sur CSS : simple séparateur, plus de division. LibSass, lui, est en fin de vie depuis le 23 octobre 2025.

Le passage à l'heure d'été : annoncé longtemps à l'avance, mais le jour venu les horloges non réglées sont fausses.

@use 'sass:math';
@use 'sass:color';

// Deviendra une erreur en Dart Sass 2.0 :
// $w: 100% / 3;            → math.div(100%, 3) ou calc(100% / 3)
// $l: lighten($c, 10%);    → color.adjust($c, $lightness: 10%)

$w: math.div(100%, 3);
$l: color.scale($c, $lightness: 20%);

// Tester dès maintenant :
// sass --fatal-deprecation=slash-div,color-functions src:dist

Cas d'usage : Auditer un projet SCSS avant la fin 2026 : compiler avec les dépréciations fatales, corriger, puis épingler la version.

Dart Sass est l'implémentation officielle. LibSass (moteur C++ de node-sass) a atteint sa fin de vie le 23 octobre 2025 : plus aucune mise à jour, même de sécurité. Seul le paquet npm sass donne accès à @use, @forward, aux modules intégrés et aux couleurs CSS Color 4.

Dart Sass est le nouveau modèle de voiture, Node Sass est l'ancien modèle qui n'est plus fabrique.

{
  "devDependencies": {
    "sass": "^1.80.0"
  }
}
// À retirer : "node-sass" (LibSass, fin de vie le 23/10/2025)

Cas d'usage : Toujours utiliser Dart Sass (package npm 'sass') pour avoir accès a @use, @forward et les built-in modules.

@import est déprécié depuis Dart Sass 1.80.0 (17 octobre 2024), en même temps que les fonctions intégrées globales (lighten, map-get…) disponibles dans les modules sass:*. Le retrait n'aura lieu qu'en Dart Sass 3.0, au moins deux ans après l'annonce ; Dart Sass 2.0 conserve un simple avertissement. Migration : sass-migrator module --migrate-deps.

Le panneau « fermeture définitive dans deux ans » sur une route encore ouverte.

# migrer tout le projet (dépendances comprises)
npx sass-migrator module --migrate-deps src/main.scss

# uniquement les fonctions globales → modules
npx sass-migrator module --built-in-only src/main.scss

# temporairement : masquer / rendre fatal
sass --silence-deprecation=import,global-builtin src:dist
sass --fatal-deprecation=import src:dist

Cas d'usage : Planifier la migration d'une base SCSS ancienne avant Dart Sass 3.0 et supprimer le bruit d'avertissements en CI.

Fonctions custom qui calculent et retournent une valeur via @return. Contrairement aux mixins, elles ne génèrent pas de CSS mais produisent des valeurs.

Une calculatrice : tu lui donnes des chiffres, elle te rend un résultat, pas un objet.

@use 'sass:math';

@function rem($px) {
  @return math.div($px, 16) * 1rem;
}

h1 { font-size: rem(32); } // => 2rem
p { font-size: rem(16); }  // => 1rem

Cas d'usage : Créer des conversions (px->rem), calculs de grille, ou manipulations de couleurs réutilisables.

Syntaxe #{} qui insère la valeur d'une variable dans un sélecteur, un nom de propriété, ou une chaîne. Nécessaire la ou Sass n'attend pas une expression.

Un trou dans un texte a trous : tu inseres dynamiquement le mot qui manque.

$side: 'left';
$component: 'card';

.#{$component} {
  margin-#{$side}: 1rem;
  background: url('/img/#{$component}.png');
}

Cas d'usage : Générer dynamiquement des sélecteurs ou propriétés dans des boucles et des mixins.

Architecture CSS en triangle inverse : du plus générique (settings, tools) au plus spécifique (utilities). Chaque couche a une spécificité croissante.

Un entonnoir : en haut le général (variables), en bas le spécifique (overrides) avec une spécificité croissante.

// Ordre d'import ITCSS
// 1. Settings  ($variables)
// 2. Tools     (mixins, functions)
// 3. Generic   (reset, normalize)
// 4. Elements  (h1, p, a)
// 5. Objects   (.container, .grid)
// 6. Components (.card, .btn)
// 7. Utilities  (.hidden, .mt-4)

Cas d'usage : Éviter les guerres de spécificité dans les grands projets en structurant le CSS par couches.

Fonctions pour lire (map.get) et fusionner (map.merge) des Sass Maps. map.deep-merge fusionne récursivement les maps imbriquées.

map.get c'est chercher dans le dictionnaire, map.merge c'est coller deux dictionnaires ensemble.

@use 'sass:map';

$theme: (colors: (primary: blue, secondary: green));
$override: (colors: (primary: red));

$merged: map.deep-merge($theme, $override);
// => (colors: (primary: red, secondary: green))

Cas d'usage : Créer des themes configurables en fusionnant un theme de base avec des overrides.

Fonction du module sass:math qui remplace l'opérateur / pour la division (disponible depuis Dart Sass 1.33.0). Dart Sass 2.0, annoncé pour décembre 2026, traitera / uniquement comme un séparateur, comme en CSS ; calc() reste une alternative.

Utiliser un couteau a pain au lieu de déchirer : même résultat, mais la bonne méthode.

@use 'sass:math';

// DÉPRÉCIÉ : $half: 100% / 2;
$half: math.div(100%, 2);        // 50%
$third: math.div(100%, 3);       // 33.333%
$rem: math.div(16px, 16) * 1rem; // 1rem
// alternative CSS native :
$gap: calc(100% / 3);

Cas d'usage : Effectuer des divisions dans Sass sans declencer de warnings de dépréciation.

Blocs de styles réutilisables qui acceptent des arguments. Définis avec @mixin, utilises avec @include. Génèrent du CSS a chaque utilisation (contrairement aux placeholders).

Une recette paramétrable : même technique de base, mais tu choisis les ingrédients a chaque fois.

@mixin respond-to($bp) {
  @if $bp == 'md' { @media (min-width: 768px) { @content; } }
  @if $bp == 'lg' { @media (min-width: 1024px) { @content; } }
}

.grid {
  display: block;
  @include respond-to('md') { display: grid; }
}

Cas d'usage : Factoriser des patterns CSS répétitifs comme les média queries, les préfixes vendeur, les animations.

Système de modules fondé sur @use/@forward qui remplace @import. Chaque fichier est un module avec sa propre portée, ce qui évite les collisions de noms. @import est officiellement déprécié depuis Dart Sass 1.80.0 (17 octobre 2024) et sera retiré dans Dart Sass 3.0.

Des appartements dans un immeuble : chacun a ses affaires, tu sonnes pour emprunter quelque chose.

// @use charge le module une seule fois
@use 'sass:math';
@use 'sass:color';
@use './config' as cfg;

.box {
  width: math.div(100%, 3);
  color: color.adjust(cfg.$primary, $lightness: 10%);
}

Cas d'usage : Structurer un projet Sass en modules encapsulés sans effets de bord globaux.

Possibilité d'imbriquer les sélecteurs pour refléter la hiérarchie HTML. Le caractère & référence le sélecteur parent.

Des poupées russes : chaque niveau contient le suivant, et & c'est la poupée dans laquelle tu te trouves.

.card {
  padding: 1rem;
  &__title { font-size: 1.5rem; }
  &:hover { box-shadow: 0 4px 6px #0002; }
  &.is-active { border-color: blue; }
}

Cas d'usage : Organiser le CSS en suivant la structure des composants et la convention BEM.

Fichiers Sass préfixes par _ qui ne sont pas compilés individuellement. Ils sont importes dans un fichier principal pour organiser le code en modules.

Des chapitres d'un livre : chacun existe séparément mais ils sont assembles dans un volume final.

// _variables.scss
$primary: #3498db;

// _buttons.scss
.btn { background: $primary; }

// main.scss
@use 'variables';
@use 'buttons';

Cas d'usage : Organiser un projet CSS en fichiers thématiques (variables, mixins, composants).

Sélecteurs virtuels préfixes par % qui ne sont compilés que s'ils sont étendus via @extend. Évitent de générer du CSS inutile contrairement aux classes classiques.

Un plan d'architecte : il n'existe pas physiquement, mais tout bâtiment qui l'utilise hérité de sa structure.

%flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero { @extend %flex-center; height: 100vh; }
.modal { @extend %flex-center; }

Cas d'usage : Partager des styles communs entre sélecteurs sans générer de classe CSS inutilisée.

Structures clé-valeur en Sass, similaires aux objets JS. Manipulables avec map-get, map-merge, map-keys, map-values. Idéales pour les systèmes de tokens.

Un dictionnaire : tu cherches un mot (clé) et tu obtiens sa définition (valeur).

@use 'sass:map';

$breakpoints: (sm: 640px, md: 768px, lg: 1024px);

@mixin respond($bp) {
  @media (min-width: map.get($breakpoints, $bp)) {
    @content;
  }
}
.grid { @include respond('md') { display: grid; } }

Cas d'usage : Stocker des systèmes de tokens (couleurs, breakpoints, z-index) et les iterer avec @each.

Scalable and Modular Architecture for CSS. Catégorisé les styles en 5 types : Base, Layout (l-), Module, State (is-), Theme. Aide a la maintenabilite.

Un code de rangement par couleur : chaque type de vêtement a sa couleur d'étiquette.

/* Base */
body { font: 16px/1.5 sans-serif; }
/* Layout */
.l-sidebar { width: 250px; }
/* Module */
.card { border: 1px solid #ddd; }
/* State */
.is-active { display: block; }
/* Theme */
.theme-dark .card { background: #333; }

Cas d'usage : Structurer un CSS legacy ou un projet sans framework composant (multi-page apps).

Valeurs réutilisables prefixees par $ qui stockent couleurs, tailles, fonts, etc. Compilées en valeurs statiques (contrairement aux CSS custom properties).

Des étiquettes sur des pots d'épices : au lieu de décrire l'épice, tu utilises son nom.

$primary: #3498db;
$spacing-lg: 2rem;
$font-stack: 'Inter', sans-serif;

.button {
  background: $primary;
  padding: $spacing-lg;
  font-family: $font-stack;
}

Cas d'usage : Centraliser les valeurs de design pour les modifier en un seul endroit.