Appuyez sur Entrée pour voir vos résultats ou Echap pour annuler.

4 trucs faciles pour écrire du code SCSS propre

SASS, plus précisément la syntaxe SCSS, a été pour moi un grand soulagement. Enfin, je pouvais écrire du code CSS bien structuré et beaucoup plus facile à maintenir. Puisque c’est un langage qui n’est pas encore utilisé partout, j’ose espérer vous allez apprendre quelques trucs avec ces 4 trucs faciles pour écrire du code SCSS propre.

#1 – SCSS est facile à mettre en place

Laissez immédiatement tomber CSS! Juste l’intégration de SCSS vous permettra d’avoir un code plus propre. Au plus simple, vous avez besoin de Ruby et de SASS qui s’installe via GEM, le gestionnaire de dépendances de Ruby. Une fois installés, créer un fichier « style.scss » avec du contenu CSS normal :

Ensuite, compiler avec cette commande :

Vous pouvez aussi ajouter --watch pour écouter les changements et lancer la compilation automatiquement. Le résultat sera un fichier CSS que vous pouvez inclure dans une balise <link> de votre code HTML.

#2 – Séparer en plusieurs fichiers source

Honnêtement, quelqu’un a déjà vu du code propre CSS dans une application de plus de 2 ans? Une des solutions, c’est de bien séparer les préoccupations (SoC). Vous pouvez, par exemple, faire des fichiers différents pour le responsive, puis les importer avec @import :

Puis importer le tout dans fichier de style principal :

Contrairement au CSS standard, le compilateur va intégrer les fichiers pour ne produire qu’un seul CSS.

Vous pourriez aussi, par exemple, sortir toutes les couleurs dans un fichier « _colors.scss », toutes les classes qui stylent de composants de formulaire (boutons, champs texte, etc.) dans un fichier « _forms.scss » etc.!

#3 – Manipuler les couleurs

Une autre fonctionnalité de SCSS est de permettre de créer des variables qui peuvent être réutilisées dans tout le code. Par exemple, le thème d’un site web a une couleur principale. Elle pourrait être créée comme ceci :

Puis, en utilisant les fonctions de manipulation des couleurs, vous pourriez créer une couleur complémentaire à la couleur de base :

Ou encore changer son ton :

Les possibilités sont assez intéressantes.

#4 – Ne plus jamais dupliquer de code

Que ce soit 2 ou 3 lignes de code ou des blocs complets, on dirait que le CSS standard a été conçu pour favoriser le copier/coller 😀 SCSS nous offre, fort heureusement, plusieurs façons de ne plus dupliquer de code.

L’héritage

Permet d’utiliser la classe parente comme telle, mais aussi de faire qu’une autre classe hérite de ses styles. Se fait avec @extend.

Les mixins

Un peu comme une fonction qui ajouterait les styles qui y sont définis directement dans la classe de destination. Se fait avec @mixin et @include.

Conslusion

Aujourd’hui, vous avez appris à utiliser quelques trucs moins connus de SASS (SCSS) qui devraient vous permettre de créer du code évolutif et facile à maintenir. J’espère que cet article vous a plus et vous fera apprécier le (s)CSS de nouveau!

N’hésitez pas à me donner votre opinion en commentaire! Ça me fera le plus grand des plaisirs de vous répondre.

Merci de partager avec vos collègues 🙂

Suivez-nous par courriel!

Saisissez votre adresse courriel pour vous abonner au blog d'Ezo et recevoir une notification de chaque nouvel article par email.

Rejoignez 30 autres abonnés