web doc SASS : Reprenez le contrôle de vos feuilles de style

Commençons par regarder sur Wikipédia, qui nous donne une définition générale bien obscure: En informatique, un préprocesseur est un programme qui procède à des transformations sur un code source, avant l’étape de traduction proprement dite (compilation ou interprétation).
Essayons d’expliquer cela de manière plus simple. Un préprocesseur est un programme jouant lerôle d’une moulinette : on lui donne du code source et, en échange, il génère un code modifié. Dans le cas d’un préprocesseur CSS comme Sass, on donne des fichiers écrits dans un langage spécifique à Sass et la moulinette génère des feuilles de style CSS qui pourront être comprises par un navigateur. On appelle ce processus la compilation.​

Cliquez pour agrandir...

Ce langage spécifique est leSCSS(pour « Sassy CSS »). On retrouve dans ce nom les lettresCSS, car la syntaxe du langage SCSS se base sur celle de CSS. En fait, tout code CSS estcompatible SCSS. Cela veut dire que tout travail en CSS est directement transposable en SCSS.Il suffit pour cela de changer l’extension du fichier pour.scss.​

Cliquez pour agrandir...

Si le SCSS a une syntaxe basée sur celle de CSS, on peut se demander l’intérêt de Sass. En fait, Sass ajoute à CSS un ensemble de fonctionnalités qui permettent d’organiser de manière plus maintenable les feuilles de style. Sa devise pourrait être ”Don’t Repeat Yourself” (ne vous répétez pas). Il ne s’agit donc pas de rajouter des propriétés, mais d’aider le développeur à yvoir plus clair, à défricher son code (d’où la métaphore de la forêt vierge, CQFD). Dans ce but, Sass permet de factoriser certains bouts de code, stocker les couleurs/polices/dimensions fréquemment utilisées en un unique endroit, rendre certaines règles plus facilement réutilisables d’un projet à l’autre.​

Cliquez pour agrandir...