Stylus, un pre-processor de CSS pour Node.js
J'ai déjà testé beaucoup de pré-processor dans le but de trouver celui qui me convient le mieux. Stylus est un de ces outils qui permettent de faciliter le développement de feuilles de style. Stylus utilise une approche assez novatrice et particulière qui pourrait plaire aux développeurs qui sont familier avec Jade, le moteur de template utilisé pour les applications Node.js...
Stylus est un pré-processor de CSS, tout comme Less ou encore SASS mais il a la particularité de fonctionner avec Node.js. Mais ce n'est pas le seul intérêt de Stylus.
Syntaxe "à la" Jade
En effet, en introduction je vous parlais de la syntaxe Jade, c'est une syntaxe très simple, pas de point-virgules, pas d'accolades, pas de double points. On peux écrire des CSS très rapidement sans trop se poser de question pour la syntaxe. Ainsi le code suivant :
body {
font: 14px Georgia, serif;
margin : 0;
padding : 0;
}
Avec la syntaxe Jade, ce snippet va devenir :
body
font 14px Georgia, serif
margin 0
padding 0
La seule information importante à conserver dans vos feuilles de style est la tabulation qui va permettre à Stylus de déterminer le début et la fin d'une règle. Cette syntaxe conviendra aux développeurs fainéants mais elle a l'inconvénient de rendre difficile la relecture de ces CSS. Les développeurs de Stylus ont pensé à cela et rien ne vous empêche de conserver les doubles points ce qui peut améliorer la relecture... Pour avoir un apercu total des possibilité de syntaxe, je vous conseille de visiter cette page de documentation. Avec cette technique, le code suivant est valide selon Stylus et sera correctement compilé :
body
font 14px Georgia, serif
margin 0;
padding : 0
Très pratiques pour ceux qui ont des petits problèmes de rigueur syntaxiques...
Plein de fonctionnalités
En plus de cette faculté à comprendre des syntaxes particulière, Stylus comprend de nombreuses fonctionnalités que l'on retrouve dans ces concurrents tel que les variables, les mixins, les fonctions, les opérators, des iterators, des conditionnals. Même l'import d'autres fichiers a été amélioré, Stylus est capable d'importer tous les fichiers d'un répertoire, ce qui est véritablement très pratique pour générer un fichier de prod.
Bref, vous l'aurez peut être compris avec Stylus tout ce que vous voulez faire avec vos CSS a été prévu !
Installation et utilisation
Quand on parle de Node.js, cela implique une installation facile à réaliser à condition d'avoir NPM qui est passé en version 1.0 il y a peu. Pour installer Stylus, c'est du coup très simple, vous devez commencer à avoir l'habitude, il suffit de saisir dans un terminal la commande suivante :
$> npm install stylus
Une fois l'installation effectuée, vous pouvez lancer le processus de compilation avec la commande avec un fichier nommé mon_fichier_stylus.styl (l'extension n'importe pas) :
$> stylus mon_fichier_stylus.styl
Normalement, vous devriez obtenir le fichier CSS suivant mon_fichier_stylus.css dans le même répertoire. Mais vous en conviendrez qu'il n'est pas pratique de devoir relancer la compilation de vos CSS à chaque modification que l'on fait. Stylus est donc fourni avec un "observateur de fichiers" qui va détecter les modifications d'un fichier Stylus pour le recompiler à la volée...
$> stylus -w /mon/dossier/a/observer
Je ne sais pas comment sont gérés les erreurs de compilation, mais je suppose que le message d'erreur est affiché dans la console, ce qui peut être aider au débug, en revanche cela ne doit pas être facile de voir qu'il y a eu une erreur lors de la compilation...
Il existe également un utilitaire qui permet de transformer vos feuilles de style en fichier Stylus, mais je ne sais pas si cet import vers Stylus est vraiment performant... Et enfin, si vous êtes un utilisateur de Textmate tant mieux, car Stylus fourni un bundle pour cet éditeur que l'on peut trouver dans le répertoire .
En conclusion
Stylus est vraiment un pré-processeur de CSS très complet, peut être le plus complet existant. Mais cela le rend peut être plus complexe à prendre en main comparé à Less ou Compass. Mais une fois bien pris en main, il peut vraiment devenir un outil intéressant pour développer ces CSS. Je ne l'ai pas utilisé comme j'avais testé Less et Compass par manque de temps, mais je me laisserai bien tenté pour voir !
Projet GitHub : Stylus Source : TheChangelog [EN]