SCSS (Sassy CSS)
SCSS (Sassy CSS) est la syntaxe la plus populaire du préprocesseur CSS Sass. Il étend CSS avec des variables, l'imbrication, les mixins, les fonctions et l'héritage, tout en se compilant en CSS standard.
Type MIME
text/x-scss
Type
Texte
Compression
Sans perte
Avantages
- + CSS-compatible syntax — any CSS is valid SCSS
- + Powerful module system (@use, @forward) for large projects
- + Rich built-in functions for colors, math, and lists
- + Industry standard in enterprise design systems
Inconvénients
- − Requires a compilation step (Dart Sass or build tool)
- − Native CSS custom properties and nesting reduce the need for SCSS
- − Large projects can have complex dependency graphs
Quand utiliser .SCSS
Utilisez SCSS pour les grandes feuilles de style nécessitant une organisation, une réutilisation (mixins) et des variables. Considérez le CSS pur avec les propriétés personnalisées et l'imbrication pour les projets plus simples.
Détails techniques
SCSS est un sur-ensemble de CSS — tout CSS valide est du SCSS valide. Il ajoute les variables ($var), l'imbrication, les partials (_name.scss), @use/@forward, les mixins (@mixin/@include), les fonctions et @extend. Se compile via Dart Sass (recommandé) ou LibSass (obsolète).
Historique
Hampton Catlin a créé Sass en 2006 avec la syntaxe originale à indentation. Natalie Weizenbaum a introduit la syntaxe SCSS (compatible CSS, avec accolades) dans Sass 3 (2010), qui est devenue la syntaxe dominante. Dart Sass est l'implémentation de référence actuelle.