SASS – Leçon 2 : diviser pour mieux régner, la factorisation

En CSS, la division de feuilles de style est une pratique déconseillée car elle diminue les performances du site en multipliant le nombre de requêtes au serveur.
On se contraint donc souvent à utiliser un seul fichier de plusieurs milliers de lignes, peu lisible et difficile à maintenir.

Avec SASS, il est possible d’organiser votre projet en plusieurs fichiers, qui seront importés et compilés en un seul fichier CSS minifié.
Cela est rendu possible grâce aux partials.

Les partials en SASS

Le nom d’un partial est toujours précédé d’un underscore.
Ex : _reset.scss

Sans cet underscore, SASS générerait un fichier supplémentaire reset.css.

Code SCSS du fichier _reset.scss :

Code SCSS du fichier principal style.scss :

CSS compilé :

Grâce à la règle @import, vous pouvez opter pour une organisation modulaire, ce qui vous permettra d’avoir un code mieux structuré et plus facile à maintenir (ce que l’on retrouve dans la philosophie SMACSS).