SASS - Les variables

Tout comme d'autres langages de programmation, les variables en Sass permettent de stocker différents types d'informations afin de pouvoir les réutiliser plus tard comme : un code couleur, un calcul ou encore un booléen.

Elles permettent de maintenir une cohérence tout au long de la conception de votre site Web et de faciliter la maintenance de celui-ci.

Les variables se déclarent à l'aide du signe dollar $ (oui, comme en PHP).

$red: #FF0000;
$green: #00FF00;
$blue: #0000FF;
$black: #000000;
$white: #FFFFFF;

Le nom d'une variable est totalement libre, mais restez dans la facilité de compréhension. Une variable qui ne nomme tapis et qui a pour valeur la couleur bleue, n'aide pas.

Utilisation des variables

Maintenant de que vos variables sont définies, il est temps de les utiliser dans votre feuille de styles :

.btn {
    background-color: $green;
    padding: 12px 24px;
    color: $white;
    border-radius: 6px;
}

Au moment de la compilation de votre feuille de styles en CSS, vous obtiendrez la classe avec les bonnes couleurs :

.btn {
    background-color: #00FF00;
    padding: 12px 24px;
    color: #FFFFFF;
    border-radius: 6px;
}