Présentation
Pour aller plus loin

Les variable sur SASS remplissent les mêmes fonctions que les variables CSS standards mais sont convertir lors de la compilation ce qui permet d'éviter les problèmes de compatibilité (il n'est en revanche pas possible de les modifier après coup comme cela peut être le cas des variables CSS).

Les variables se déclarent avec un $ :

$primary: blue;

.btn {
    background: $blue;
}

Il est possible d'utiliser une variable dans un sélecteur en utilisant la notation #{$variable}.

$medium: 768px;

@media only screen and min-width: #{$medium} {
    .btn {
        background: $blue;
    }
}

Il est aussi possible d'utiliser des opération arithmetique sur les variables.

$padding: 20px;

.btn {
    padding: $padding / 2;
}

Enfin, il est aussi possible d'utiliser des fonction pour effectuer des transformations plus poussées sur les variables. L'ensemble des fonctions disponibles sont listées dans la documentation.

.btn {
    background: $primary;

    &:hover {
        background: darken($primary, 10);
    }
}