Les pré-prosesseurs CSS.

Je vais vous partager mon expérience sur l’utilisation des pré-processeurs CSS.

Un préprocesseur un un language de plus haut niveau d’abstraction qui va être transformé en css strandard avant d’être transféré sur le serveur. Les pré-processeurs actuels offrent l’utilisation de variables, de fonctions, de placeholder…
Ces outils simplifient ainsi l’écriture et la maintenace du code CSS.
Les principaux concurrents dans cette catégorie sont LESS, SAS et Stylus.

Less

J’ai d’abord été séduit par LESS (LEaner Style Sheets). C’est la syntaxe très proche du css de ce pré-processeur avec l’utilisation du signe @ qui m’a plus. Par contre quand j’ai essayé de faire des choses un peu avancées, les choses n’ont pas été triviales.
Je n’aime pas le système de boucle. Il faut en fait passer par des fonctions récursives. Ce qui n’est pas le plus intuitif.

Avantages

  • La syntaxe très proche du css natif.

Inconvénients

  • Pas de vraies boucles mais des fonctions récursives.

Sass

La syntaxe SASS(Syntactically Awesome Style Sheets), n’a donc pas été mon premier choix mais il est souvent le pionnier dans les nouvelles fonctionnalités, même si LESS ne tarde jamais à suivre. J’aime les vraies boucles et une intégration souvent plus présentes dans les outils. Je n’aime pas les variables à la jQuery qui commence avec $.
SASS a maintenant le communauté la plus importante.

Le SASS permet deux syntaxes une très concise basé sur l’indentation (SASS) et une plus proche du CSS (SCSS).

Avantages

  • La communauté la plus active.
  • De vraies boucles intuitives.
  • Choix de la syntaxe SASS (que les gens venant de python/ruby doivent adorer) ou SCSS (plus proche du css natif pour ne pas perdre ses habitudes).

Inconvénients

  • Syntaxe qui me rappel jQuery avec son $ moins intuitive que LESS.

Stylus

Je ne me prononcerait pas sur ce dernier ne l’ayant jamais Utilisé.


Ressources

  1. LESS
  2. SASS
  3. Stylus
Like what you read? Give Samuel DIDIER-LAURENT a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.