Formateur et Épurateur SCSS / Sass

SCSS (Sassy CSS) et Sass sont deux syntaxes pour le même préprocesseur. SCSS utilise des accolades et des points-virgules comme le CSS normal — tout CSS valide est aussi du SCSS valide. La syntaxe Sass indentée utilise l'indentation au lieu des accolades et des sauts de ligne au lieu des points-virgules. SCSS est beaucoup plus populaire car il est familier aux développeurs CSS et plus facile à adopter progressivement. La plupart des projets modernes utilisent l'extension de fichier .scss.

Les variables SCSS (déclarées avec $) stockent des valeurs réutilisables comme les couleurs, les tailles de police, l'espacement et les points de rupture. Par exemple, $couleur-primaire: #3498db; vous permet de référencer la même couleur dans toute votre feuille de style et de la modifier en un seul endroit. Bien que les propriétés personnalisées CSS (--variable) offrent désormais des fonctionnalités similaires nativement, les variables SCSS sont des valeurs au moment de la compilation qui permettent des fonctionnalités plus puissantes comme l'interpolation dans les sélecteurs et les opérations mathématiques.

L'imbrication SCSS vous permet d'écrire des sélecteurs enfants à l'intérieur de sélecteurs parents, reflétant la structure de votre HTML. Par exemple, .nav { .item { color: blue; } } se compile en .nav .item { color: blue; }. L'imbrication améliore la lisibilité pour les styles liés, mais une imbrication excessive (plus de 3-4 niveaux de profondeur) crée des sélecteurs trop spécifiques qui sont difficiles à remplacer. La règle générale : imbriquez pour la structure, pas pour chaque relation parent-enfant.

@mixin crée des blocs de CSS réutilisables qui sont copiés partout où vous les @include — comme une fonction qui produit du CSS. @extend partage les styles d'un sélecteur en ajoutant le sélecteur qui étend à la règle originale — il regroupe les sélecteurs plutôt que de dupliquer le code. Utilisez @mixin lorsque vous avez besoin de paramètres ou lorsque les styles varient entre les utilisations. Utilisez @extend pour un héritage de style simple où vous souhaitez une sortie CSS minimale. Une utilisation excessive de @extend peut créer des chaînes de sélecteurs inattendues.