Contenu du cours
Techniques CSS Avancées
Techniques CSS Avancées
Variables Sass
La première fonctionnalité utile est l'existence des variables. Nous pouvons stocker et réutiliser des valeurs dans le code. C'est très similaire au langage de programmation qui permet de créer une variable une fois et de l'utiliser plusieurs fois. Pour déclarer une variable, nous devons mettre un signe dollar () et un nom de variable, puis nous mettons un deux-points (
:`) et donnons une valeur.
Remarque
Nous pouvons utiliser n'importe quelle notation de nommage, qu'il s'agisse du kebab case (
text-primary-color
), du snake case (text_primary_color
), ou du camel case (textPrimaryColor
). Ce qui est essentiel, c'est d'utiliser la même notation de nommage tout au long du projet.
Imaginons que nous devons créer un balisage dans lequel nous avons toute la couleur du texte en #474943
et sa taille de police en 24px
. Le fichier sass ressemblerait à ceci :
Nous gardons toujours les variables aussi descriptives que possible, afin de garantir ce dont chaque variable est responsable.
L'avantage est que cela facilite les modifications de conception du projet ultérieurement. Si la taille de la police ou la couleur du texte change, nous pouvons mettre à jour la valeur des variables $textColor
et $textFontSize
, et le projet sera également modifié.
Merci pour vos commentaires !