A variable can hold several types of information: a color code, a calculation, or even a true/false value (boolean).
To use a variable, you must declare it with the “$” sign followed by its name and value: $background: rgba(black, .2);
Once declared, the variable can be called anywhere in the document, even if it is defined in a file imported using @import.
$color-success: green;
$color-error: red;
$color-info: blue;
// importation du fichier _vars.scss
@import "vars";
$font-size: 14px;
.success,
.error,
.info {
font-size: $font-size;
}
.success {
color: $color-success;
}
.error {
color: $color-error;
}
.info {
color: $color-info;
}
Code CSS généré :
.success,
.error,
.info {
font-size: 14px;
}
.success {
color: green;
}
.error {
color: red;
}
.info {
color: blue;
}
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.
// Il est également possible de lui attribuer une valeur utilisant une fonction
$font-size: rem-calc(24);
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.
// Exemple :
$use-slider: true;
// Puis créer une condition :
@if $use-slider {
// code
}
Avec $use-slider à « false », le code à l’intérieur de la condition ne sera pas compilé.