Préprocesseur CSS: Less, sass, scss ou stylus ?

Rentrons à fond dans le troll (ou pas), et comparons less, sass (scss) et stylus. Voici rapidement ce que j’en pense :

Less

less

Je n’aime pas less. Principalement pour ces raisons :

  • Il est lent (oh oui)
  • Il n’a pas d’opérateurs logiques ni le boucles (if, for, …)
  • Il n’est pas permissif sur la syntaxe : « {} : ; » sont obligatoires
  • Il interprète toutes ses variables avant de commencer à créer les règles CSS

Cela signifie que si vous écrivez ça :

@nice-blue: #5B83AD;
#header { color: @nice-blue; }
@nice-blue: #4081C5;

Devinez quelle sera la couleur du header ? (la réponse en live sur less2css)

Sass / Scss

sass-getting-started
Non mais « allo » quoi…

La différence Sass et Scss est très bien expliquée sur la page d’accueil du site de Sass :

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.

The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.

Les points forts de Sass :

  • Meilleur que Less (faut pas déconner)
  • Beaucoup de bibliothèques qui font le café

Ses points faibles :

  • L’interpréteur est écrit en ruby. Et quand on ne fait pas de ruby, on ne veut pas installer ruby juste pour ça…
  • C’est lent. Moins que less, mais ça reste lent.
  • Il n’est pas permissif sur la syntaxe : « {} : ; » sont obligatoires avec Scss (Sass n’oblige que les « : »)
  • Le scope des variables, il connait pas :
$color: black;
.scoped {
  $color: white;
  color: $color;
}
.unscoped {
  // Less/Stylus = black (global)
  // Sass = white (overwritten by local)
  color: $color;
}
  • N’est pas capable d’inclure des mixins au nom variable !! (je me suis arraché les cheveux lors de ma dernière mission à cause de celle-là)

Genre, j’écris ça :

@mixin mymixin {
  background-color: blue;
}

$incl: 'mymixin';

body {
  backgroud-color: white;
  @include $incl();
}

J’ai comme erreur de compilation :

source string:9: error: invalid name in @include directive

Il aurait été particulièrement utile dans notre projet de boucler sur des tableaux de noms de mixin. Résultat, nous avons du dupliquer plein de code inutilement dans des dizaines de fichiers Scss… :(

Stylus

stylus-650x208

Stylus est mon préprocesseur préféré.

  • Il fait tout ce que font les autres préprocesseurs, en plus rapide
  • Il ne t’oblige pas à utiliser des « {} : ; ». Avec ou sans, tu fais comme tu veux
  • Les variables sont correctement scopées
  • Bien évidemment, les mixins au nom variable, il les gère :
mamixin()
  background-color: blue

incl = 'mamixin'

body
  background-color: white
  incl()

Ses points faibles :

  • l’interpréteur est écrit en node.js (comme je l’utilise régulièrement ça tombe bien, mais pour un dev qui ne fait pas de node.js, ça peut être chiant de l’installer juste pour ça)
  • Il ne lui manque plus que des bibliothèques aussi complètes que celles de Sass (citons Compass) pour être le meilleur choix dans tous les cas de figure côté fonctionnalités.

Conclusion

Donc si vous vous demandez quel préprocesseur utiliser, regardez si vous avez absolument besoin de bibliothèques Sass et regardez si les fonctionnalités que vous souhaitez ne sont pas déjà disponibles avec Stylus et/ou Grunt.

Perso, j’utilise maintenant Stylus dans tous les cas de figure rencontrés dès lors que le choix m’appartient.

Commentaires