Différences entre les variables CSS et SASS

Avant de commencer je pars du principe que vous avez tous déjà une idée de ce qu’est le SASS, si vous n’avez aucune idée de ce que c’est je vous renvoie à mon article qui vous initiera au language SASS. Dans cet article je vous présente également des fonctionnalités très utile, notamment les variables.

Et bien qu’il soit également possible de créer des variables en CSS je vais vous expliquer ici les différences qu’il y a entre les variables que vous créez en CSS et celles que vous crées en SASS.

Mais avant toutes choses petite précision : en CSS nous parlons plutôt de Custom Properties (propriétés personnalisées) et non de variables à proprement parler.

Les Custom Properties en CSS

Pour définir une propriété personnalisée il vous suffit de préfixer son nom par un double tirets --, une fois cette propriété définie vous pourrez l’appeler dans votre document grâce à la fonction var()

Petit exemple :

:root {
    --primaryColor: #0000FF;
}

form button {
    background-color: var(--primaryColor);
}

Ici mon bouton aura un background-color égale à #0000FF.

a/ La portée des propriétés personnalisées en CSS

Noter bien que j’ai déclaré ma propriété dans :root ce qui signifie qu’elle est disponible à travers tout mon document. Mais si je l’avais déclaré ailleurs j’aurai changé sa portée !

#myForm1 {
    --primaryColor: #0000FF;
}

#myForm2 button {
    background-color: var(--primaryColor);
}

Ici ma propriété --primaryColor est déclarée dans mon élément #myForm1 (qui ne se trouve pas dans #myForm2). #myForm2 ne peut donc pas récupérer cette propriété. C’est ce que l’on appelle le scope en programmation, ou la portée si vous préférez.

b/ L’utilisation des propriétés personnalisées en Javascript

Un autre point très intéressant des propriétés personnalisées est qu’elles peuvent être utilisées en Javascript ! Si je veux par exemple récupérer ma valeur précédente –primaryColor dans mon Javascript, je peux le faire en faisant :

let element = document.querySelector('#myForm1');
getComputedStyle(element).getPropertyValue("--primaryColor");

Je peux même changer sa valeur :

element.style.setProperty("--primaryColor", '#00FF00');

// Si maintenant je refais 
getComputedStyle(element).getPropertyValue("--primaryColor");

// J'aurai comme résultat :
'#00FF00'

c/ La compatibilité des propriétés personnalisées avec les medias queries

Les propriétés personnalisées sont également compatibles avec les media queries CSS. Je peux donc décider par exemple d’avoir un propriété avec une valeur complexe pour définir le nombre de colonnes que je veux dans un display: grid; :

:root {
    --columns: 1;
    --column-gap: 0px;
}
@media (min-width: 768px) {
    :root {
        --columns: 3;
        --column-gap: 30px;
    }
}

.container {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    column-gap: var(--column-gap);
}

Avec les propriétés définies dans cet exemple mon .container s’adaptera responsivement aux valeurs établies.

Les variables en SASS

Nous venons donc de voir que les variables en CSS sont présentes dans le DOM et peuvent même être récupérées et utilisées avec Javascript. Là où en SASS ce n’est absolument pas possible.

Lorsque vous définissez des variables en SASS celles-ci ont pour objectifs d’être utilisées dans votre environnement SASS, avant la compilation vers le CSS. Une fois compiler ces variables ne sont plus présentes, elles sont transformées à travers tout votre style vers les valeurs que vous leurs avez attribué.

Exemple :

// Je définie ma variable
$primaryColor: #00FF00;

// Puis je l'utilise dans mes fichiers SASS
.btn-primary {
    background-color: $primaryColor;
}

Le résultat de ce code en SASS sera, après la compilation en CSS :

.btn-primary {
    background-color: 00FF00;
}

Ce qu’il faut retenir

Si vous avez bien suivi jusqu’ici je ne vous dis pas qu’il est préférable d’utiliser l’un plutôt que l’autre. Mais qu’en réalité leurs utilités sont très différentes. Vous ne pouvez donc pas réellement comparer les propriétés personnalisées CSS et les variables SASS car elles n’ont pas les mêmes objectifs, fonctionnalités.

Les propriétés personnalisées permettent de définir des variables dans votre DOM et les variables SASS vous permettent de coder plus aisément votre SASS. Voyez les variables SASS exactement comme des variables en PHP ou Javascript par exemple.

Vous pouvez donc tout à fait utiliser les 2 en même temps si vous le souhaitez !

Par exemple si vous souhaitez définir une petite librairie de breakpoints vous pouvez les définir en SASS pour les utiliser tout au long de votre intégration et également les passer dans votre DOM si vous souhaitez y accéder en Javascript :

$breakpoints : (
    mobile     : 450px,
    tablet     : 768px,
    laptop     : 1200px
);

:root {
    @each $key, $val in $breakpoints {
        --breakpoint-{$key}: $val;
    }
}