Déjà SASS c’est quoi ?
Alors SASS ou bien SCSS est un langage qui permet d’améliorer nos CSS traditionnels. C’est basé sur Ruby et ça s’installe sur l’ordinateur en tant qu’exécutable. Vous écrivez votre CSS de manière plus sympa et ensuite ça compile ce que vous avez écrit en une feuille de style CSS tout ce qu’il y a de plus classique. Et c’est cette feuille de style que votre page web appelle. Cette étape de compilation peut soit être faite à la main ou bien peut se faire tout seule chaque fois que vous faite une modification. SASS a un concurrent direct qui s’appelle LESS et qui fait sensiblement la même chose avec quelque légères variantes syntaxiques.
Un petit tour du propriétaire
Voilà le topo. Aujourd’hui ce qui se fait le plus couramment c’est d’écrire tous les styles dans un seul gros fichier CSS qui s’appelle presque à coup sûr style.css.
<head> <link rel="stylesheet" href="css/style.css"> </head>
Le plus gros problème avec cette manière de faire concerne l’administration de style.css sur le long terme. En effet avec un fichier qui fera entre 1000 et x millier de lignes, bah au bout d’un moment plus personne sait où on en est. Donc là une manière simple de faire serait de fragmenter style.css en plusieurs fichiers distincts. Comme ceci par exemple :
<head> <link rel="stylesheet" href="css/grid.css"> <link rel="stylesheet" href="css/header.css"> <link rel="stylesheet" href="css/footer.css"> <link rel="stylesheet" href="css/lightbox.css"> <link rel="stylesheet" href="css/tooltip.css"> <link rel="stylesheet" href="css/ce-que-vous-voulez.css"> </head>
Ici c’est effectivement plus clair dès le premier coup d’oeil mais on trouve deux inconvénients majeurs à cette manière de faire. Premièrement il faut sans cesse maintenir à jour les appels css du <head>, ce que je déteste faire parce que je suis un gros feignant 😛 et deuxièmement ce n’est pas ce qu’il y a de mieux pour les performances de chargement. Simplement parce que chaque requête HTTP évitée est un gain généralement non négligeable. L’exemple le plus flagrant c’est l’iPhone et l’iPad qui aujourd’hui ne sont pas capables de paralélliser les requêtes. Ceux-ci chargent chaque fichier CSS (ou autres) un par un… Pas top du tout donc. Bon sinon on pourrait peut-être tirer parti de la propriété css @import… Cette propriété permet d’inclure un fichier css dans un autre. Déjà premier avantage : ça permet de revenir à un fichier unique qui est chargé dans la page.
<head> <link rel="stylesheet" href="css/style.css"> </head>
Et maintenant dans style.css, voilà à quoi ça ressemblerait :
/* je suis un fichier CSS */ @import "css/grid.css"; @import "css/header.css"; @import "css/footer.css"; @import "css/lightbox.css"; @import "css/tooltip.css"; @import "css/ce-que-vous-voulez.css"; ...
Ah là c’est pas mal ! C’est propre on a plusieurs CSS qui sont appelés à l’intérieur de style.css et du coup style.css lui est le seul fichier appelé dans la page donc une seule requête HTTP pour la page, pas mal.
Mais là encore malheureusement c’était sans compter sur cet @import et de son interprétation dans nos navigateurs… En effet cette technique empêche nos navigateurs de paralélliser les requêtes HTTP et sont donc obligés de charger les différents fichiers CSS un par un… Encore pire que la méthode précédente.
Bon et donc comment SASS pourrait-il m’aider à mieux organiser mes CSS ?
Et bien tout simplement en utilisant à nouveau le @import mais cette fois-ci celui de SASS, PAS CELUI de CSS. En fait SASS (et LESS aussi d’ailleurs) permet lui aussi d’inclure des fichiers sass les uns dans les autres. Sauf que ça se fait côté environnement de développement et non plus côté navigateur au moment de l’affichage de la page. En fait voilà comment ça se présenterait dans le navigateur :
<head> <link rel="stylesheet" href="css/style.css"> </head>
Donc un seul fichier CSS. Cool ! Et comme on est en SASS en fait on ne travaille pas directement dans ce fichier style.css on travail dans sa version SCSS (ou SASS) c’est à dire qu’on travaille dans style.SCSS qui est ensuite transformé en style.CSS.
Donc depuis le fichier SCSS on peut importer d’autres fichiers SCSS !
// je suis un fichier SCSS/SASS @import "scss/variables.scss"; @import "scss/mixins.scss"; @import "scss/grid.scss"; @import "scss/header.scss"; @import "scss/footer.scss"; @import "scss/lightbox.scss"; @import "scss/tooltip.scss"; ...
Et là on tire profit à la fois de la performance dans le navigateur grâce à un seul fichier CSS et également de la clarté du code grâce à la fragmentation en plusieurs fichiers distincts.
Pas mal hein ? 🙂
Remarque importante
Vous noterez au passage les deux premiers @import : variables.scss et mixins.scss. En les important en tout premier on peut en faire profiter tous les fichiers SCSS suivants. Exemple : on a un mixin qui s’appelle border-radius(); qui est définit dans mixins.scss, et on peut l’utiliser sans soucis dans tooltip.scss qui lui est importé en dernier. Idem pour les variables ! C’est juste génial on a du coup même pas besoin de faire des @import “scss/variable.scss” et @import “scss/mixins.scss” en haut de chacun des autres fichiers !
Encore mieux hein ? 😛
Ressources
• Le site de SASS et celui de LESS
• Article Alsacréations : N’utilisez pas @import
• Don’t use @import css rule
• Mon propre mini boilerplate qui utilise cette technique (avec des vrais morceaux de Twitter Bootstrap dedans)
Merci pour cette excellent article, avec des explications claires et précises.
La perfection serait encore de faire un court paragraphe résumant les étapes de création d’un SCSS ou d’un LESS.
Bonn journée !