Qu’est-ce qu’une variable Sass ?
Une variable Sass est un conteneur pour une valeur. L’idée est de lier un nom à une valeur puis d’utiliser ensuite ce nom à la place de la valeur dans le code. Le nom utilisé sera ensuite converti automatiquement en la valeur à laquelle il est lié. Cela permet une plus grande clarté dans le code et une bien meilleure maintenabilité puisque si on souhaite changer la valeur en question il suffit de la faire une fois à l’endroit où on l’a lié au nom.
Les variables Sass sont très simple d’utilisation : il suffit d’utiliser un signe $ (dollar) suivi d’un nom pour déclarer (c’est-à-dire créer) une variable et d’affecter une valeur à ce nom en séparant le nom de la valeur par le signe : (deux-points).
Variables Sass vs variables CSS
Les variables Sass sont différentes des variables ou “propriétés personnalisées (“custom properties”) CSS et s’utilisent différemment :
- Les variables Sass sont toutes compilées par Sass. Les variables CSS sont incluses dans la sortie CSS.
- Les variables CSS peuvent avoir différentes valeurs pour différents éléments, mais les variables Sass n’ont qu’une valeur à la fois.
- Les variables Sass sont impératives, ce qui signifie que si vous utilisez une variable puis modifiez sa valeur, l’utilisation antérieure restera la même. Les variables CSS sont déclaratives, ce qui signifie que si vous modifiez la valeur, cela affectera les utilisations antérieures et ultérieures.
Cas pratique d’utilisation des variables Sass
Imaginons que nous possédions un site avec une charte graphique précise. Notre site va utiliser un nombre limité de couleurs et de variations pour habiller le contenu HTML.
Ici, l’utilisation des variables Sass va être particulièrement pertinente : nous allons pouvoir affecter les différentes couleurs de notre site à nos variables puis utiliser ces variables à travers tout notre code Sass. Si un jour nous venons à modifier la charte graphique, nous n’aurons ainsi qu’à mettre à jour la valeur affectée aux variables.
Valeur par défaut des variables
Dans certains cas, on voudra laisser la possibilité aux utilisateurs de notre code de personnaliser les valeurs des variables avant de les utiliser pour générer le code CSS. Cela peut être le cas par exemple lorsqu’on souhaite laisser aux utilisateurs la possibilité de changer les couleurs des différents éléments pour personnaliser leur site.
Sass met à notre disposition le drapeau !default qui permet de réaliser cela. En effet, ce drapeau permet d’indiquer qu’une valeur doit être affectée à une variable uniquement si cette variable n’est pas définie ou si sa valeur est null (c’est-à-dire dans si l’utilisateur n’a pas personnalisé la couleur dans notre exemple). Sinon, la valeur existante sera utilisée.
La portée des variables
La “portée” des variables définit l’espace dans lequel les variables vont être accessibles. Les variables SASS peuvent avoir une portée soit globale, soit locale.
Les variables déclarées en dehors des accolades (dans les fichiers .scss) sont appelées variables globales. Les variables globales sont disponibles (utilisables) n’importe où après leur déclaration, même dans une autre feuille de style.
Les variables déclarées dans des blocs (les accolades dans les fichiers .scss) sont généralement locales et ne sont accessibles que dans le bloc où elles ont été déclarées.
Dans certains cas particuliers, on voudra définir des variables globales depuis un espace de portée local. Pour faire cela, il suffit d’utiliser le drapeau SASS !global qui permet d’indiquer qu’une variable doit être considérée comme globale quelque soit l’endroit où elle a été déclarée.
Deux variables locale et globale possédant le même nom peuvent tout à fait cohabiter : chaque variable sera considérée comme une entité différente. Dans ce cas, la variable locale aura la priorité sur la variable globale dans l’espace dans lequel elle a été déclarée.
