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.
$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;
}
Generated CSS code :
.success,
.error,
.info {
font-size: 14px;
}
.success {
color: green;
}
.error {
color: red;
}
.info {
color: blue;
}
The use of a variable has no limit; you can call it as many times as you wish. It is also possible to use a variable in a mixin, a function, or loops.
// Il est également possible de lui attribuer une valeur utilisant une fonction
$font-size: rem-calc(24);
Use case of a boolean variable in SASS
In the SASS – Lesson 2 post, we explained that it’s possible to organize your CSS in a modular way.
Thanks to boolean variables, you can activate or deactivate a partial or a portion of SASS code.
// Exemple :
$use-slider: true;
// Puis créer une condition :
@if $use-slider {
// code
}
With $use-slider set to “false”, the code inside the condition will not be compiled.