CSS Custom Properties vs variables SASS : Le battle

Découvrez ce que sont les Custom Properties et pourquoi les utiliser.

Maureen Roche

juin 2019 - Temps de lecture : env. 2 min

Aujourd’hui, nous allons parler un peu plus technique, en l’occurrence de variables en CSS.

Un petit « back to basics » s’impose

A l’origine les variables n’existaient pas en CSS. Pourtant, cela peut être très pratique pour stocker les couleurs, la taille d’une marge ou d’un élément. C’est pourquoi, comme beaucoup d’autres, nous nous sommes tournés vers l’incontestable préprocesseur SASS. L’utilisation de variables n’est pas le seul avantage qu’il apporte mais pour cet article nous nous concentrerons uniquement sur celui-ci.

Il y a quelques temps sont apparus les « Custom properties », autrement dit des variables natives CSS. Le principe est le même que celui des variables SASS mais avec une écriture un peu plus complexe.

Mais alors, quelle solution choisir ?

Au départ, le manque de compatibilité navigateur et l’écriture fastidieuse ne nous a pas convaincu. Nous sommes donc restés sur SASS, que nous utilisons de toute manière pour bien d’autres fonctionnalités (mixins etc)

Mais la lecture de cet article : https://codyhouse.co/blog/post/css-custom-properties-vs-sass-variables a attiré notre attention.

L’avantage majeur, c’est la possibilité de redéfinir une variable après sa déclaration. Cela peut se révéler très pratique pour changer une valeur selon la taille d’écran avec les Media Queries. Ou encore redéfinir des couleurs dans le cadre d’un thème (clair / foncé par exemple).

Les custom properties ont aussi l’avantage d’être accessibles en Javascript.

En conclusion

Si vous souhaitez en savoir plus sur les avantages des Custom Properties, je vous conseille fortement la lecture de l’article ci-dessus.

De notre côté, sans arrêter d’utiliser SASS, nous allons progressivement intégrer l’utilisation des variables CSS en complément et ainsi étendre encore un peu les possibilités que nous offre le développement web.

Écrit par

Maureen Roche