SCSSDesign SystemCSS

Design System modulaire avec Dart Sass 3

Construire un design system robuste et maintenable avec @use, les tokens SCSS et les thèmes dark/light.

6 min de lecture

Design System modulaire avec Dart Sass 3

Dart Sass 3 abandonne définitivement @import au profit de @use et @forward. Cette migration est bien plus qu'un changement syntaxique — c'est une refonte de l'architecture CSS.

Architecture avec @use

// styles/_variables.scss
$font-size-base: 1rem;
$spacing-unit: 0.5rem;
$radius-md: 0.5rem;

// styles/_themes.scss
@use 'variables' as v;

:root {
  --color-bg: #0a0a0f;
  --color-primary: #7c3aed;
  --font-size-base: #{v.$font-size-base};
}

Tokens de design

Les tokens sont la fondation d'un design system scalable. Ils centralisent les décisions visuelles :

  • Couleurs : palette primaire, surface, states
  • Typographie : tailles, weights, line-heights
  • Espacements : scale harmonique (0.25rem à 4rem)
  • Breakpoints : mobile-first (sm, md, lg, xl)

Thèmes dark/light

[data-theme='light'] {
  --color-bg: #ffffff;
  --color-text: #1a1a2e;
  --color-primary: #6d28d9;
}

[data-theme='dark'] {
  --color-bg: #0a0a0f;
  --color-text: #e2e8f0;
  --color-primary: #7c3aed;
}

Conclusion

Un design system SCSS bien structuré avec @use offre une DX supérieure, des builds plus rapides et une maintenabilité accrue pour les projets long terme.