SASS est un préprocesseur CSS qui permet d’organiser au mieux votre code. Grâce à lui vos feuilles de styles seront beaucoup plus maintenables et propres !
La première différence avec le CSS classique va être de ne plus travailler en extension « .css » mais en « .scss ». Sass va compiler tout ce que vous écrivez dans vos fichiers Scss directement dans un fichier Css comme un grand. Étant une adepte de l’organisation, Sass est devenu pour moi essentielle à ma vie de développeuse.
L’architecture d’un projet avec SASS
Sass s’organise autour de 7 dossiers regroupés en 1 seul fichier. Ainsi pour commencer, vous allez créer un dossier « SASS » , puis y placer à la racine, un fichier « main.scss » , ce fichier contiendra tous les imports de vos autres fichiers.
Ensuite vous allez organiser votre dossier « SASS » en 7 sous-dossiers :
Si vous importez vos libraries tierces via des CDN le dossier Vendors ne vous sera d’aucune utilité.
Puis placer y a l’intérieur, des fichiers dont le nom commencera par un underscore. Ces fichiers sont appelés des partiels car ils ne seront pas interprétés par le programme mais seront seulement importés dans le fichier principal.
Installation de Sass
Sass s’installe avec Node.js via la commande : npm install sass.
Ensuite, vous devez expliquer au programme où allez chercher vos fichiers Sass afin qu’il les compile en fichier CSS. Cela se fait grâce à l’initialisation du package JSON.
Vous devez indiquer dans un premier temps la destination de votre fichier « main.scss » . Puis après le symbole : vous devez indiquer le lieu de destination de votre fichier CSS.
Une fois l’initialisation faite, vous allez démarrer SASS avec la commande : npm run sass.
Et voilà ! Vous pouvez dès maintenant commencer à écrire dans vos fichiers Sass votre code sera automatiquement compilé dans votre fichier Css. Essayez!
Il est cependant nécessaire de démarrer Sass à chaque fois que vous ré-ouvrez votre projet.
Les 3 règles de Sass
Le DRY (Don’t Repeat Yoursel)
Ne vous répétez pas ! Pour cela, vous devez créer des classes générales puis des classes plus spécifiques afin de ne pas avoir les mêmes propriétés écrites plusieurs fois.
LE BEM ( Bloc, Élément, Modificateur)
C’est une convention de nommage pour les classes. Il est essentiel de créer des classes avec des noms parlant et de rattacher tout élément enfant à son parent dans son nom par des doubles underscore. Pour une modification unique : le nom de l’élément qui porte la modification suivi de double trait d’union suivi du nom du modificateur.
LE NESTING (L’indentation)
Cette fonctionnalité est uniquement possible grâce à Sass, elle permet d’avoir un code plus organisé et plus facile à maintenir. Il vous suffit d’imbriquer vos éléments enfants dans leurs parents. L’esperluette indique à Sass où placer l’élément parent et permet donc de supprimer les espaces entre un élément parent et son enfant.
Les fonctionnalités plus poussées
Les variables
Elles permettent de modifier le code plus facilement en réduisant les duplications. Il suffit d’assigner un nom à une valeur.
Les mixins
Les mixins ressemblent aux variables mais peuvent intégrer une ou plusieurs propriétés entièrement et non pas seulement une valeur.
Les fonctions
Les fonctions sont des bouts de code préfabriqués. Elles effectuent des tâches, comme par exemple assombrir darken() ou éclaircir lightness() une couleur.
Les conditions & les boucles
Elles servent à automatiser certaines tâches d’ajout de propriété pour éviter la duplication de code
Vous n’avez plus d’autres choix que de l’utiliser !
Sass est un puissant outil qui regorge de fonctionnalités. Je vous invite à regarder la documentation officielle ainsi que le guide des basics pour en découvrir tous ses secrets.