Variables
Les variables SASS permettent de stocker des valeurs que l’on peut réutiliser tout au long d’une feuille de style. Elles sont essentielles pour maintenir la cohérence dans les projets et faciliter les mises à jour globales de la conception.
Une variable est définie par un signe dollar $ suivi du nom de la variable et de sa valeur assignée. Exemple : $primary-color: #333;.
Les variables peuvent stocker des couleurs, des tailles de police, des marges – pratiquement n’importe quelle valeur CSS. Elles permettent de modifier rapidement l’apparence d’un site en changeant quelques valeurs centrales.
Exemple :
$primary-color: #3498db;
body {
color: $primary-color;
}
Mixins
Les mixins SASS sont des blocs de code réutilisables qui peuvent être inclus dans d’autres sélecteurs. Ils servent à grouper des déclarations CSS que l’on doit réutiliser à travers le site.
Un mixin est défini avec le mot-clé @mixin suivi du nom du mixin et d’un bloc de contenu. Pour l’utiliser, on emploie @include suivi du nom du mixin. Exemple : @mixin reset-list { margin: 0; padding: 0; list-style: none; }.
Les mixins sont parfaits pour les ensembles de propriétés qui nécessitent des préfixes vendeurs, des modèles de mise en page répétitifs, ou des ensembles de propriétés complexes utilisés de manière cohérente.
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.header {
@include flex-center;
}
Nesting
L’imbrication (nesting) permet d’écrire les sélecteurs CSS d’une manière hiérarchique qui reflète la structure HTML. Cela rend le code plus lisible et réduit la répétition des sélecteurs.
Les sélecteurs enfants sont écrits à l’intérieur des accolades du sélecteur parent. SASS appliquera automatiquement la cascade des sélecteurs en conséquence.
L’imbrication est utile pour organiser visuellement les styles selon la structure du document, facilitant la maintenance et la compréhension du code. Toutefois, il faut l’utiliser avec modération pour éviter une spécificité excessive et un code encombré.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Ces trois fonctionnalités – variables, mixins et nesting – constituent la base de la puissance et de la flexibilité de SASS. Elles offrent aux développeurs les moyens de créer des feuilles de style plus organisées, maintenables et évolutives. En exploitant ces outils, on peut considérablement réduire le temps de développement et améliorer la qualité du code CSS, rendant ainsi le processus de conception web à la fois plus efficace et agréable.