!default assigne une valeur seulement si la variable n'existe pas encore (ideal 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 : Creer des librairies Sass configurables ou les utilisateurs peuvent overrider les valeurs par defaut.
Directive qui echappe au nesting pour generer le selecteur a la racine du fichier CSS. Utile pour creer des selecteurs freres 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 : Generer des selecteurs de theme ou de contexte sans casser la structure du nesting.
Boucles Sass pour generer du CSS dynamiquement. @each itere sur des listes/maps, @for sur une plage numerique, @while tant qu'une condition est vraie.
Des machines qui produisent des variantes en serie : meme modele, differentes couleurs/tailles.
$colors: (primary: #3498db, danger: #e74c3c);
@each $name, $color in $colors {
.btn-#{$name} {
background: $color;
&:hover { background: darken($color, 10%); }
}
}Cas d'usage : Generer automatiquement des variantes de composants (couleurs, tailles, etats) a partir de maps.
Directive qui fait heriter un selecteur des styles d'un autre. Le selecteur etendu est ajoute au selecteur source dans le CSS compile (groupement de selecteurs).
Copier les genes d'un parent : l'enfant herite de toutes les caracteristiques 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 : Eviter la duplication CSS quand plusieurs selecteurs partagent un ensemble commun de styles.
@use importe un module Sass avec un namespace (variables accessibles via module.$var). @forward re-exporte les membres d'un module pour creer des points d'entree.
@use c'est importer un outil, @forward c'est le mettre en vitrine dans ta boutique pour les autres.
// _colors.scss
$primary: blue;
// _index.scss
@forward 'colors';
// component.scss
@use 'settings'; // => settings.$primary
// ou @use 'settings' as *; // => $primaryCas d'usage : Remplacer @import (deprecie) par un systeme de modules avec namespaces et encapsulation.
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 matieres : 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 developpeur sache ou trouver et ajouter du code.
Convention de nommage Block__Element--Modifier combinee avec le nesting Sass et le caractere &. Cree des classes plates et previsibles.
Un systeme 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 facon previsible et eviter les conflits de specificite.
Modules integres de Sass (sass:color, sass:math, sass:string, sass:list, sass:map) qui fournissent des fonctions utilitaires sans installation supplementaire.
La boite a outils livree 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); // aCas d'usage : Manipuler couleurs, nombres, listes et maps sans dependances externes.
Fonctions du module sass:color pour manipuler les couleurs : ajuster la luminosite, saturation, teinte, ou melanger deux couleurs avec un ratio.
Un peintre qui eclaircit, assombrit ou melange ses couleurs sur sa palette.
@use 'sass:color';
$base: #3498db;
$lighter: color.adjust($base, $lightness: 15%);
$darker: color.scale($base, $lightness: -30%);
$blend: color.mix($base, white, 80%);Cas d'usage : Generer des palettes de couleurs derivees automatiquement a partir d'une couleur de base.
Mecanisme qui permet a un mixin de recevoir un bloc de CSS via @content. Le bloc est injecte a l'endroit ou @content est appele 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 : Creer des mixins de contexte (media queries, pseudo-selecteurs) qui encapsulent un pattern.
Dart Sass est l'implementation officielle et activement maintenue. Node Sass (base sur LibSass en C++) est deprecie et ne recoit plus de nouvelles fonctionnalites.
Dart Sass est le nouveau modele de voiture, Node Sass est l'ancien modele qui n'est plus fabrique.
// package.json
// BIEN :
"sass": "^1.77.0" // Dart Sass
// DEPRECIE :
"node-sass": "^9.0.0" // Ne supporte pas @useCas d'usage : Toujours utiliser Dart Sass (package npm 'sass') pour avoir acces a @use, @forward et les built-in modules.
Fonctions custom qui calculent et retournent une valeur via @return. Contrairement aux mixins, elles ne generent pas de CSS mais produisent des valeurs.
Une calculatrice : tu lui donnes des chiffres, elle te rend un resultat, 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); } // => 1remCas d'usage : Creer des conversions (px->rem), calculs de grille, ou manipulations de couleurs reutilisables.
Syntaxe #{} qui insere la valeur d'une variable dans un selecteur, un nom de propriete, ou une chaine. Necessaire 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 : Generer dynamiquement des selecteurs ou proprietes dans des boucles et des mixins.
Architecture CSS en triangle inverse : du plus generique (settings, tools) au plus specifique (utilities). Chaque couche a une specificite croissante.
Un entonnoir : en haut le general (variables), en bas le specifique (overrides) avec une specificite 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 : Eviter les guerres de specificite 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 recursivement les maps imbriquees.
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 : Creer des themes configurables en fusionnant un theme de base avec des overrides.
Fonction du module sass:math qui remplace l'operateur / pour la division. L'usage de / pour diviser est deprecie dans Dart Sass.
Utiliser un couteau a pain au lieu de dechirer : meme resultat, mais la bonne methode.
@use 'sass:math';
// DEPRECIE : $half: 100% / 2;
// CORRECT :
$half: math.div(100%, 2); // 50%
$third: math.div(100%, 3); // 33.333%
$rem: math.div(16px, 16) * 1rem; // 1remCas d'usage : Effectuer des divisions dans Sass sans declencer de warnings de depreciation.
Blocs de styles reutilisables qui acceptent des arguments. Definis avec @mixin, utilises avec @include. Generent du CSS a chaque utilisation (contrairement aux placeholders).
Une recette parametrable : meme technique de base, mais tu choisis les ingredients 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 repetitifs comme les media queries, les prefixes vendeur, les animations.
Systeme de modules base sur @use/@forward qui remplace @import. Chaque fichier est un module avec son propre scope, evitant les collisions de noms.
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 encapsules sans effets de bord globaux.
Possibilite d'imbriquer les selecteurs pour refleter la hierarchie HTML. Le caractere & reference le selecteur parent.
Des poupees russes : chaque niveau contient le suivant, et & c'est la poupee 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 prefixes par _ qui ne sont pas compiles individuellement. Ils sont importes dans un fichier principal pour organiser le code en modules.
Des chapitres d'un livre : chacun existe separement 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 thematiques (variables, mixins, composants).
Selecteurs virtuels prefixes par % qui ne sont compiles que s'ils sont etendus via @extend. Evitent de generer du CSS inutile contrairement aux classes classiques.
Un plan d'architecte : il n'existe pas physiquement, mais tout batiment qui l'utilise herite 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 selecteurs sans generer de classe CSS inutilisee.
Structures cle-valeur en Sass, similaires aux objets JS. Manipulables avec map-get, map-merge, map-keys, map-values. Ideales pour les systemes de tokens.
Un dictionnaire : tu cherches un mot (cle) et tu obtiens sa definition (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 systemes de tokens (couleurs, breakpoints, z-index) et les iterer avec @each.
Scalable and Modular Architecture for CSS. Categorise 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 vetement a sa couleur d'etiquette.
/* 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 reutilisables prefixees par $ qui stockent couleurs, tailles, fonts, etc. Compilees en valeurs statiques (contrairement aux CSS custom properties).
Des etiquettes sur des pots d'epices : au lieu de decrire l'epice, 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.
Autres stacks