Adopter Sass : pourquoi vous devriez arrêter d'utiliser Vanilla CSS

Lorsque j'ai entendu parler de Sass et d'autres préprocesseurs CSS pour la première fois, mes pensées exactes n'étaient pas très enthousiastes. "Pourquoi avons-nous besoin d'un autre outil pour quelque chose qui fonctionne déjà aussi bien que CSS ?". "Je n'utiliserai pas ça". "Mon CSS est suffisamment ordonné pour ne pas en avoir besoin". "Un préprocesseur est destiné aux personnes qui ne savent pas comment écrire du CSS, si vous savez comment écrire du CSS, vous n'aurez pas besoin d'un préprocesseur". « Après tout, les processeurs sont destinés aux personnes qui ne savent pas écrire de CSS. S'ils le faisaient, ils n'auraient pas besoin d'un préprocesseur ». Et je les ai en fait évités pendant un certain temps, jusqu'à ce que je sois obligé de l'utiliser dans plusieurs projets.

Je n'avais pas réalisé à quel point j'aimais travailler avec Sass jusqu'à récemment, lorsque j'ai dû revenir au CSS vanille dans un projet. Pendant ce temps, j'ai tellement appris que j'ai décidé de faire l'éloge de Sass et d'en faire un monde meilleur, et de faire de vous une personne plus heureuse !

Pourquoi utiliser Sass de toute façon ?

Organisation : @import

Ce projet que je viens de mentionner, un grand site Web de commerce électronique, avait un seul fichier CSS avec 7184 lignes de déclarations de style non compressées. Oui, vous avez bien lu : sept mille cent quatre vingt quatre lignes de CSS. Je suis sûr que ce n'est pas le plus gros fichier CSS que les développeurs front-end ont dû gérer dans l'industrie, mais c'était assez gros pour être un gâchis complet.

C'est la première raison pour laquelle vous avez besoin de Sass : il vous aide à organiser et à modulariser vos feuilles de style. Ce ne sont pas des variables, ce n'est pas de l'imbrication. Pour moi, la fonctionnalité clé de Sass sont les partiels et la manière dont il étend la règle CSS @import pour lui permettre d'importer des fichiers SCSS et Sass. En pratique, cela signifie que vous pourrez diviser votre énorme fichier style.css en plusieurs fichiers plus petits qui seront plus faciles à maintenir, à comprendre et à organiser.

La règle @import existe depuis presque aussi longtemps que CSS lui-même. Cependant, il a acquis une mauvaise réputation car lorsque vous utilisez @import dans vos fichiers CSS, vous déclenchez des requêtes HTTP distinctes, une pour chaque fichier CSS que vous importez. Cela peut nuire aux performances de votre site. Alors que se passe-t-il lorsque vous l'utilisez avec Sass ? Si vous n'avez jamais cessé de réfléchir à ce que signifie le mot "préprocesseur", c'est le moment.

Un préprocesseur est un programme qui traite ses données d'entrée pour produire une sortie qui est utilisée comme entrée pour un autre programme. -Wikipédia

Donc, pour en revenir à notre règle @import, cela signifie que le @import sera géré par Sass et tous nos fichiers CSS et SCSS seront compilés dans un seul fichier qui se retrouvera sur notre site en direct. L'utilisateur n'aura à faire qu'une seule requête et téléchargera un seul fichier, tandis que la structure de votre projet peut être composée de centaines de fichiers modularisés. Voici à quoi peut ressembler le style.scss d'un projet Sass typique :

 @import “variables”; @import “reset”; @import “fonts”; @import “base”; @import “buttons”; @import “layout”;

Ne vous répétez pas : les variables

Tout article faisant l'éloge de Sass commencera probablement par mentionner sa fonctionnalité vedette - les variables. L'utilisation la plus courante des variables est une palette de couleurs. Combien de fois avez-vous trouvé plusieurs déclarations de ce qui est censé être de la même couleur, se retrouvant dans le CSS avec des nuances légèrement différentes parce que personne n'utilise le même code hexadécimal ? Sas à la rescousse. Dans Sass, vous pouvez déclarer des variables avec presque n'importe quelle valeur. Ainsi, notre palette de couleurs peut être quelque chose comme :

 $brand: #226666; $secondary: #403075; $emphasis: #AA8439;

Les mots commençant par "$" sont des variables Sass. Cela signifie que plus tard dans vos feuilles de style, vous pourrez utiliser ces mots, et ils seront mappés aux valeurs que vous avez définies auparavant :

 body { background: $secondary; } .logo { color: $brand; } a { color: $emphasis; } a:hover { color: $brand; }

Imaginez comment cela pourrait changer nos 7184 lignes de code CSS, et vous pourriez commencer à désirer Sass dès maintenant. Encore mieux, imaginez qu'il y ait une refonte de la marque et que vous deviez mettre à jour toutes les couleurs de votre CSS. Avec Sass, la seule chose que vous devez faire est de mettre à jour les déclarations de ces variables une fois, et bam ! Les changements seront tout autour de vos feuilles de style.

J'ai codé cet exemple dans Sassmeister, un terrain de jeu Sass. Alors allez-y et essayez de changer ces variables en autre chose.

L'utilité des variables ne se limite pas aux couleurs, mais également aux déclarations de polices, aux tailles, aux requêtes multimédias, etc. C'est un exemple vraiment basique pour vous donner une idée, mais croyez-moi, les possibilités avec Sass sont infinies.

Code source plus propre : imbrication

L'imbrication pourrait être la deuxième fonctionnalité la plus mentionnée de Sass. Lorsque je suis revenu au CSS vanille après avoir utilisé Sass, le fichier CSS que je regardais semblait si encombré que je ne savais pas s'il était minifié. Sans imbrication, le CSS vanille n'a pas meilleure apparence que les jolis fichiers .min.css imprimés :

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; } .header.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .header .nav { list-style: none; } .header .nav li { display: inline-block; } .header .nav li a { display: block; padding: 0.5em; color: #AA8439; }

Avec Nesting, vous pouvez ajouter des classes entre les accolades d'une déclaration. Sass compilera et gérera les sélecteurs de manière assez intuitive. Vous pouvez même utiliser le caractère "&" pour obtenir une référence du sélecteur parent. Pour en revenir à notre exemple CSS, nous pouvons le transformer en :

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; &.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .nav { list-style: none; li { display: inline-block; a { display: block; padding: 0.5em; color: #AA8439; } } } }

Il est beau et plus facile à lire. N'hésitez pas à jouer avec cet exemple.

De nouveau! Ne vous répétez pas : mixins et extensions

La répétition en CSS est toujours difficile à éviter. Et cela ne fait pas de mal d'insister un peu plus là-dessus, surtout quand Sass vous donne des mixins et des extensions. Ce sont deux fonctionnalités puissantes qui permettent d'éviter de nombreuses répétitions. Les possibilités avec les mixins et les extensions ne semblent pas avoir de fin. Avec les mixins, vous pouvez créer des déclarations CSS paramétrées et les réutiliser dans vos feuilles de style.

Par exemple, disons que vous avez un module box avec un bouton à l'intérieur. Vous voulez que la bordure de la boîte et l'arrière-plan du bouton soient de la même couleur. Avec CSS vanilla, vous faites quelque chose comme :

 .box { border: 2px solid red; } .box .button { background: red; }

Disons que vous voulez maintenant le même module de boîte, mais avec une couleur différente. Vous ajouterez quelque chose comme ceci à votre CSS :

 .box-alt { border: 2px solid blue; } .box-alt .button { background: blue; }

Maintenant, disons que vous voulez un module de boîte, mais avec une bordure plus fine. Vous ajouteriez :

 .box-slim { border: 1px solid red; } .box-slim .button { background: red; }

Beaucoup de répétitions, non ? Avec Sass, vous pouvez résumer ces cas pour réduire les répétitions. Vous pourriez définir un mixin comme celui-ci :

 @mixin box($borderSize, $color) { border: $borderSize solid $color; .button { background: $color; } }

Ainsi, votre code source peut être réduit à :

 .box { @include box(2px, red); } .box-alt { @include box(2px, blue); } .box-slim { @include box(1px, red); }

C'est beau, non ? Jouez avec cet exemple. Vous pouvez créer votre propre bibliothèque de mixins, ou mieux encore, vous pouvez utiliser l'une des bibliothèques communautaires disponibles.

Les extensions sont similaires, elles vous permettent de partager des propriétés d'un sélecteur à l'autre. Cependant, au lieu de générer plusieurs déclarations, ils génèrent une liste de classes sans répéter vos propriétés. De cette façon, vous pouvez également éviter la répétition de code dans votre sortie. Oublions les boutons de notre exemple précédent et voyons comment @extend fonctionnerait avec .boxes .

Disons que vous déclarez une première case :

 .box { margin: 1em; padding: 1em; border: 2px solid red; }

Maintenant, vous voulez deux boîtes similaires à celle-ci, mais avec des couleurs de bordure différentes. Vous pouvez faire quelque chose comme :

 .box-blue { @extend .box; border-color: blue; } .box-red { @extend .box; border-color: red; }

Voici à quoi ressemblerait le CSS compilé :

 .box, .box-blue, .box-red { margin: 1em; padding: 1em; border: 2px solid red; } .box-blue { border-color: blue; } .box-red { border-color: red; }

Puissant, non ? Vous pouvez trouver l'exemple ici. Si vous examinez le CSS résultant, vous vous rendrez compte que la classe .box est incluse dans la sortie. Si vous ne voulez pas ce comportement, vous pouvez combiner @extend avec des "espaces réservés". Un espace réservé est un sélecteur spécial qui ne produira pas de classe dans le CSS. Par exemple, je me retrouve parfois à réinitialiser beaucoup les styles par défaut des listes. J'utilise généralement @extend avec un espace réservé comme celui-ci :

 %unstyled-list { list-style: none; margin: 0; padding: 0; }

Vous pouvez ensuite réutiliser ce pattern dans toutes vos feuilles de style :

 .search-results { @extend %unstyled-list; } .posts { @extend %unstyled-list; } .nav { @extend %unstyled-list; }

Votre CSS compilé ressemblera à :

 .search-results, .posts, .nav { list-style: none; margin: 0; padding: 0; }

Découvrez les exemples ici.

Y a t-il plus?

Absolument! Je ne voulais pas trop compliquer cet article, mais il y a un monde Sassy qui attend d'être découvert par vous ; et il y a aussi beaucoup de fonctionnalités au-delà de celles-ci : opérations, commentaires sur une seule ligne avec //, fonctions, boucles if... si vous avez déjà pensé "ce serait génial de faire quelque chose de 'X' avec CSS", j'en suis sûr cette chose 'X' est déjà faite par Sass. "CSS avec superpuissances" est son slogan, et cela ne peut pas être plus proche de la vérité.

Conclusion

Allez visiter la page d'installation et commencez à pirater ! Croyez-moi, vous ne le regretterez pas.

Oui, il existe des alternatives à Sass. Autres préprocesseurs (LESS, Stylus), postprocesseurs, Grunt, etc. Il existe même des variables CSS. Je ne dis pas que Sass est la seule technologie disponible. Tout ce que je dis, c'est que c'est le meilleur ! Au moins pour l'instant. Vous ne croyez pas ce que je dis ? Allez-y et essayez vous-même. Vous ne le regretterez pas !