Tout développeur ayant fait un peu de web connaît le langage CSS. Un langage qui permet de styliser une page Web, mais qui devient très vite limité. À travers cet article, nous allons essayer de comprendre pourquoi, et surtout, nous allons découvrir une alternative pour être plus performant : les préprocesseurs CSS
Les préprocesseurs : d’un code long et compliqué vers un code maintenable et organisé
Comme vous le savez, CSS vous permet de styliser une page web, mais vous avez dû également vous rendre compte que vous écriviez souvent beaucoup de code, parfois pour ne styliser qu'un seul élément. Ce code peut rapidement devenir désorganisé, difficile à relire et donc à maintenir. Entre autres, cela vient du fait que CSS ne possède pas de variables ou de fonctions comme dans d'autres langages, et vous êtes donc souvent obligé de vous répéter. Pas très DRY tout ça !
CSS évolue constamment et de nouvelles méthodologies émergent, afin d'écrire un code CSS propre. Mais parmi toutes ces techniques avancées, nous allons nous intéresser plus précisément aux préprocesseurs CSS.
Un préprocesseur, qu’est ce que c’est ?
Pour faire simple, un préprocesseur permet d'écrire du CSS dans un langage alternatif (très proche du CSS natif, rassurez-vous) qui apporte des fonctionnalités plus avancées comme les variables, des fonctions, la possibilité d'inclure des fichiers dans d'autres. Bref tout un tas de choses vous permettant d'écrire plus simplement, de mieux organiser votre code, tout en évitant au maximum les répétitions.
Une fois ce code CSS écrit dans ce nouveau langage, il va être compilé pour être retransformé en CSS natif, qui lui seul est compréhensible par votre navigateur web. Ceci est un point très important qu'il faut bien comprendre avec les préprocesseurs : ils apportent de nouvelles façons d'écrire via un langage alternatif, mais au final le code envoyé au navigateur reste du CSS natif. Le préprocesseur n'apporte pas de nouvelles fonctionnalités à CSS, mais permet juste de faciliter son écriture.
Voici un petit schéma pour résumer le fonctionnement de SCSS :
Parmi les préprocesseurs CSS les plus répandus, vous trouverez less, stylus, mais vous entendrez surtout parler de Sass/Scss.
Et en terme de code, quel est la différence ?
Voici quelques exemples permettant de mettre en évidence l’intérêt d’utiliser un préprocesseur CSS:
<!-- list.html -->
<ul class="ma-liste">
<li>item 1</li>
<li>item 2</li>
</ul>
/* style.css */
.ma-liste {
background-color: red;
}
.ma-liste:hover {
background-color: blue;
}
.ma-liste:hover > li {
color: purple;
}
.ma-liste > li {
color: green;
}
.ma-liste > li:hover {
color: yellow;
}
En SCSS, ça va donner cela
/* style.scss */
.ma-liste {
background-color: red;
&:hover {
background-color: blue;
> li {
color: purple;
}
}
}
> li {
color: green;
&:hover {
color: yellow;
}
}
Pas mal non ?
Un exemple maintenant avec la définition de mixin (des fonctions SCSS), en css vous écrivez ceci:
/* style.css */
.my-text {
text-shadow: 6px 6px 4px #f00000;
box-shadow: 3px 3px 2px #ee9191;
}
.my-text-2 {
text-shadow: 6px 10px 6px #f00000;
box-shadow: 3px 5px 3px #ee9191;
}
.my-text-3 {
text-shadow: 6px 1px 3px #f00000;
box-shadow: 3px 0.5px 1.5px #ee9191;
}
/* style.scss */
@mixin myShadows ($x, $y, $blur, $color) {
text-shadow: $x $y $blur $color;
box-shadow: $x/2 $y/2 $blur/2 lighten($color, 25%);
}
.my-text {
@include myShadows(6px, 6px, 4px, #f00000);
}
.my-text-2 {
@include myShadows(6px, 10px, 6px, #f00000);
}
.my-text-3 {
@include myShadows(6px, 1px, 3px, #f00000);
}
On se rend bien compte de l’intérêt, plutôt que de répéter plusieurs fois le style pour du texte différent, on fait appel aux mixin en lui spécifiant certains paramètres.
Vous savez maintenant ce qu’est un préprocesseur CSS, et dans quelle mesure l’utiliser. On ne rentre pas dans le détail de chaque étape aujourd’hui mais on ne manquera pas de le faire dans un prochain article. La suite au prochain épisode donc 🙂
À très bientôt !