Sass Maps

Sass 🟡 Mid

Définition

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.

Analogie

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

Exemple de code

@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.

Termes liés

#styling#interview#sass

← → au clavier pour passer d'une fiche à l'autre