SASS – Leçon 3 : les variables

Une variable peut contenir plusieurs types d’information : un code couleur, un calcul ou encore une valeur vrai/faux (booléen).

Pour utiliser une variable, vous devez la déclarer avec l’aide du signe « $ » (dollars) suivi de son nom et de sa valeur : $background: rgba(black, .2);

Une fois déclarée, la variable peut être appelée n’importe où dans la suite du document, même si elle est définie dans un fichier importé à l’aide de @import.

Code CSS généré :

L’utilisation d’une variable n’a pas de limite, vous pouvez l’appeler autant de fois que vous le souhaitez. Il est également possible d’utiliser une variable dans une mixin, une fonction ou des boucles.

Cas d’utilisation d’une variable booléenne en SASS

Dans le billet SASS – Leçon 2, nous avons expliqué qu’il est possible d’organiser votre CSS de façon modulaire.
Grâce aux variables booléennes, vous allez pouvoir activer ou désactiver un partial ou une portion de code SASS.

Avec $use-slider à « false », le code à l’intérieur de la condition ne sera pas compilé.