Variables : Déclarer et utiliser des variables pour stocker des valeurs réutilisables
Variables en SASS : Déclarer et Utiliser
1. Déclaration de variables :
- En SASS, les variables commencent par le symbole
$suivi du nom de la variable et de sa valeur. Par exemple :
$primary-color: #007bff;
$font-size: 16px;
2. Utilisation de variables :
- Une fois que vous avez déclaré une variable, vous pouvez l'utiliser n'importe où dans votre fichier SASS en référençant simplement son nom précédé du symbole
$. Par exemple :
body {
font-size: $font-size;
color: $primary-color;
}
3. Avantages des variables :
- Les variables en SASS vous permettent de stocker des valeurs réutilisables telles que les couleurs, les tailles de police, les marges, etc. Cela rend votre code plus lisible, plus maintenable et plus facile à mettre à jour.
- En utilisant des variables, vous pouvez définir une valeur une fois et l'utiliser à plusieurs endroits dans votre code. Cela évite la répétition de valeurs et réduit les chances d'erreurs.
4. Portée des variables :
- Les variables en SASS ont une portée limitée à leur bloc parent. Par exemple, si vous déclarez une variable à l'intérieur d'une règle CSS, cette variable ne sera accessible que dans cette règle et ses enfants.
- Vous pouvez également déclarer des variables globales en dehors de toutes les règles CSS, ce qui les rendra accessibles à tous les fichiers SASS importés.
5. Dynamisme des variables :
- Les valeurs des variables en SASS peuvent être dynamiques. Cela signifie que vous pouvez changer la valeur d'une variable plus tard dans votre code et toutes les références à cette variable seront mises à jour automatiquement. Par exemple :
$primary-color: #007bff;
.button {
background-color: $primary-color;
}
// Plus tard dans le code...
$primary-color: #ff6347; // Changement de la valeur de la variable
// Toutes les références à $primary-color seront mises à jour
6. Convention de nommage des variables :
- Il est recommandé de suivre une convention de nommage significative pour vos variables afin de rendre votre code plus compréhensible pour vous-même et pour d'autres développeurs qui pourraient travailler sur le projet.
Conclusion
En utilisant des variables en SASS, vous pouvez rendre votre code CSS plus propre, plus organisé et plus facile à maintenir. Les variables vous permettent de stocker des valeurs réutilisables et de les mettre à jour facilement à un seul endroit, ce qui améliore l'efficacité de votre processus de développement web.
