(Pour être à l’aise dans la lecture de cet article, il est utile de connaitre un minimum le langage CSS)
Lorsque l’on veut placer et styliser des éléments sur une page web, pas le choix, il faut se plonger dans du CSS.
Mais CSS à un certain nombre de défaut…qu’un préprocesseur comme SASS peut nous permettre de gommer.
Parce qu’on aime critiquer, faisons un petit tour des défauts de CSS.
Les chemins
Quelle horreur
Et encore, les chemins en CSS sont souvent bien plus long. Et c’est même une bonne chose qu’ils soient longs, car cela permet d’être plus précis, d’éviter qu’une balise non désirée ne soit touchée par le style, et de mieux comprendre ce qu’on est en train de modifier.
Mais quelle horreur.
La lecture est bien difficile, alors qu’on sent bien intuitivement, que beaucoup de balises sont répéter pour rien.
Que nous propose SASS ?
Alors voir ça
J’adore cette façon d’écrire.
Pourquoi ?
Il y a plusieurs raison à cela :
- La structure : On a presque pas besoin de regarder le HTML, on vois d’un premier coup d’oeil la structure de notre document !
- La clarté : Votre CSS n’est pas éparpillé dans tout les sens, il est bien ordonné.
- Rapidité : Vous n’avez pas besoin de réécrire mille fois les même balises. On gagne en rapidité d’écriture.
Les variables
Avant CSS ne permettais pas d’avoir des variables.
Cela signifie que l’on ne pouvais pas dire par exemple au début du document :
Ma couleur principale c'est celle la -> --main-bg-color: brown; Et donc je peux la réutiliser dans mon document -> background-color: var(--main-bg-color);
SASS était génial, parce que avec son propre système de variable, il permettait de résoudre le problème.
Mais maintenant CSS possède enfin son propre système pour faire des variables, donc c’est super.
Limites de SASS
Son seul inconvénient, c’est qu’il ne faut pas oublier de compiler le code. Selon les outils que vous utilisez, vous aurez souvent des manières simples pour que votre code SASS ou SCSS soit simplement traduit en code CSS.
La première installation peut avoir l’air pas évidente, et vous prendre une quinzaine de minutes.
Conclusion
Sass est vraiment interessant pour la manière dont il permet de présenter le css.
Son système de variable l’a aussi rendu incontournable pour proposer du code facilement customisable, et vous le trouverez très souvent sur internet, ou dans des projets déjà existant.
Il simplifie ainsi aussi l’utilisation des pseudo-classes et des media-query, a tel points que l’essayer, c’est l’adopter, tellement écrire du CSS devient plus simple, plus clair, et plus rapide.
Il a pleins d’autres petits avantages, notamment, il permet d’utiliser des fonctions, et il contient pleins de méthodes qui peuvent être utiles.
Il peut même permettre de se débarrasser des points virgules et des accolades, vous avez plus qu’a écrire votre CSS, sans vous soucier de la ponctuation.
Il demande peu d’apprentissage, puisque en une dizaine de minutes on a compris comment écrire son propre CSS…Et le reste, les petites améliorations, peuvent venir de temps en temps.
N’hésitez pas à aller consulter le cours d’Open Classroom sur le sujet.
