PROFILBARU.COM

Un préprocesseur CSS est un outil (ou programme) informatique permettant de générer dynamiquement des fichiers CSS. L'objectif est d'améliorer l'écriture de ces fichiers, en apportant plus de flexibilité au développeur web.

Principe

Comme son nom l'indique, un préprocesseur CSS intervient avant le traitement des fichiers CSS par les navigateurs web. Il se situe soit côté serveur, soit côté client^[1]. Il permet de générer dynamiquement un fichier CSS standard (aux normes W3C) à partir d'un ou de plusieurs fichiers source qui disposent d'une syntaxe plus étendue que le CSS^{[réf. souhaitée]}.

Il existe plusieurs préprocesseurs CSS, chacun possédant une syntaxe et un langage qui leur est propre. Bien qu'ils étendent la structure du CSS, ils restent indépendants des normes CSS existantes. Parmi les plus connus se trouvent Sass, LESS et Stylus^[2]. L'objectif des préprocesseurs CSS est d'ajouter des fonctionnalités qui permettent au développeur de mieux structurer son code, fonctionnalités qui pour beaucoup manquent au CSS^[3]. En créant une couche d'abstraction, elles visent à améliorer la maintenabilité et la clarté du code, à améliorer sa structure, à éviter les répétitions (philosophie de programmation "DRY"), et ainsi à augmenter la productivité du développeur^[4]. Quelques-unes des fonctionnalités offertes par les préprocesseurs CSS incluent généralement : les variables, l’imbrication (hiérarchisation) du code, les mixins, les opérations mathématiques et logiques, les conditions, les boucles et les importations^[2].

Exemples

Pour des exemples sur les fonctionnalités et la syntaxe d'un préprocesseur CSS, voir l'article sur le langage LESS.

Traitements complémentaires

Certains préprocesseurs CSS fournissent des traitements complémentaires sur les fichiers CSS. Par exemple, les Google Stylesheets proposent la minification du code, la vérification syntaxique, l'inversion RTL (Right-To-Left en anglais), et le renommage de classe^[5]. Ces opérations sont assimilées à du post-traitement CSS, travail dédié généralement aux "postprocesseurs" CSS^[6].

Avantages et inconvénients

Tout le monde ne plaide pas forcément en faveur de l'utilisation des préprocesseurs CSS. Voici quelques arguments qui peuvent être avancés à leur encontre^[7] :

"Ils complexifient CSS", la syntaxe des préprocesseurs étant plus complexe que le CSS de base.
"Ils n'ajoutent pas de fonctionnalités CSS aux CSS", les préprocesseurs ne pouvant générer que du CSS standard.
"Ils ne font pas (toujours) gagner de temps", leur utilisation ne se justifiant pas pour des projets de taille modeste.
"Ils peuvent être dangereux pour le standard CSS", leurs fonctionnalités risquant de faire stagner l'évolution du CSS.

Pour d'autres, de telles raisons ne sont pas suffisantes, le niveau d'abstraction et la flexibilité obtenus par les préprocesseurs CSS s'avérant plus bénéfiques que toute autre considération^[8].

Liste de préprocesseurs CSS

Nom	Site officiel	Dernière version	Licence
Sass	http://sass-lang.com	3.5.6 (23 mars 2018)	MIT
LESS	http://lesscss.org	3.8.1 (8 août 2018)	Apache 2
Stylus	http://stylus-lang.com	0.54.2 (11 mars 2016)	MIT
Closure Stylesheets	https://github.com/google/closure-stylesheets	1.2.0 (9 mars 2016)	Apache 2
CSS Preprocessor	http://csspp.org	1.0.9 (10 janvier 2016)	GNU GPL v2
CSS-Crush	http://the-echoplex.net/csscrush	2.4.0 (30 juillet 2015)	Libre
Myth	http://www.myth.io	1.5.0 (12 juillet 2015)	MIT
Rework	https://github.com/reworkcss/rework	1.0.1 (25 août 2014)	MIT
xCSS (Andrey Popp)	https://github.com/andreypopp/xcss	1.2.5 (7 juin 2014)	MIT
Clay	http://fvisser.nl/clay	0.2 (4 mars 2013)	Libre
DtCSS	https://code.google.com/p/dtcss	1.2.6 (9 juin 2011)	GNU GPL v3
Turbine	https://github.com/TurbineCSS/Turbine	1.1.0 beta1 (2 janvier 2011)	GNU GPL v3
xCSS (Anton Pawlik)	http://xcss.antpaw.org/	1.0.1 (12 janvier 2010)	MIT
CSS Cacheer	http://retired.haveamint.com/archive/2008/05/30/check_out_css_cacheer	v003 (28 août 2008)	BSD
Switch CSS	http://switchcss.sourceforge.net	1.01 (14 août 2006)	GNU GPL v2
DRY-CSS	https://www.npmjs.com/package/drycss	1.0.1	ISC
xCSS Sygnal	http://docs.xcss.sygnal.com	?	Propriétaire ?