Sass Maps

Sass 🟡 Mid

Definition

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.

Analogie

Un dictionnaire : tu cherches un mot (cle) et tu obtiens sa definition (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 systemes de tokens (couleurs, breakpoints, z-index) et les iterer avec @each.

Termes lies

#styling#interview#sass