Formation Le préprocesseur SASS : Les variables

Les variables sur SASS remplissent les mêmes fonctions que les variables CSS standards mais sont converties 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érations arithmetiques 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);
    }
}