dans Programmation 101
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 :
|
1 2 3 |
body { background-color: tomato; } |
Ensuite, compiler avec cette commande :
|
1 |
sass style.scss:style.css |
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 :
|
1 2 3 4 |
// _layout.scss @import "layout.default"; @import "layout.medium"; @import "layout.large"; |
Puis importer le tout dans fichier de style principal :
|
1 2 |
// styles.scss @import "layout/layout"; |
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 :
|
1 |
$primary-color: rgb(184, 206, 64); |
Puis, en utilisant les fonctions de manipulation des couleurs, vous pourriez créer une couleur complémentaire à la couleur de base :
|
1 |
$secondary-color: complement($primary-color); |
Ou encore changer son ton :
|
1 |
$button-default-border: 2px solid darken($primary-color, 20); // 20% plus foncée |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
.base-button { padding: 1em; border: $button-default-border; border-radius: 5px; } button.wow { @extend .base-button; background-color: $primary-color; color: $secondary-color; } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
@mixin base-button($padding, $border-radius) { padding: $padding; border: $button-default-border; border-radius: $border-radius; } button.wow { @include base-button(1em, 5px); background-color: $primary-color; color: $secondary-color; } |
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 🙂
Commentaires
Laisser un commentaire