# Préprocesseur CSS

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. 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.
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. 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. 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. 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.

## 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. Ces opérations sont assimilées à du post-traitement CSS, travail dédié généralement aux "postprocesseurs" CSS.

## 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 :
* "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.

## 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 ? |