Stylus est un préprocesseur de code CSS qui nous permet de travailler plus facilement dans notre éditeur de texte, et je vais expliquer ci-dessous les raisons de cette affirmation.
Ceci est une feuille de style telle que nous la connaissons:
body {police: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-border-radius: 5px; rayon de la bordure: 5px; }
Et il s'agirait de la même feuille de style créée avec Stylus :
police du corps 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Où sont passées les touches ? Où sont passés les points-virgules et les deux-points ? Disparus. Stylus s’en charge pour nous.
Si vous débutez en CSS et HTML, l'utilisation de Stylus est déconseillée, car vous risquez d'oublier les mécanismes sous-jacents. En revanche, si vous avez déjà une certaine expérience et souhaitez gagner du temps et de l'énergie, n'hésitez pas !
Les programmeurs Python retrouveront dans Stylus quelque chose de très similaire à ce à quoi ils sont habitués, puisqu'il leur suffit d'indenter correctement pour que la magie opère.
Installations préconisées
Pour que Stylus fonctionne, nous devons installer Node.js, qui se trouve dans la branche Community. Nous allons donc procéder comme suit :
$ sudo pacman -S nodejs
Et plus tard, nous installons Stylus. La manière traditionnelle serait:
$ npm install -g stylus
Il s'installe bien, mais cela ne fonctionne pas pour moi, donc c'est beaucoup plus facile à installer à partir d'AUR:
$ yaourt -S nodejs-stylus
Comment utiliser le stylet
Bien, nous avons installé Node.js et Stylus . Comment les utiliser ? C’est simple. Imaginons un répertoire contenant les fichiers suivants :
- dir - index.html - style.css
Il nous faut créer le fichier style.styl , celui que nous utiliserons. Ce fichier contiendra notamment :
body background-color #ffff font-size 12px a. bouton couleur rouge padding 10px
Si nous enregistrons ou apportons des modifications, rien ne se passe, car nous ne « compilons » pas notre fichier. Pour le compiler, ouvrez un terminal dans notre répertoire (où se trouve le fichier style.styl ) et exécutez :
stylus -c style.styl
Mais à chaque fois que nous enregistrons le fichier style.styl , nous devrions exécuter le code, mais heureusement ce n'est pas nécessaire, car si nous exécutons la même commande en ajoutant le paramètre -w (surveillance), voici ce qui se passe :
stylet -c -w style.styl regarder /usr/lib/node_modules/stylus/lib/functions/index.styl compilé style.css regarder style.styl compilé style.css compilé style.css
En d'autres termes, le fichier est automatiquement compilé. Le résultat serait-il?
body {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
Comme vous pouvez le constater, il ne se contente pas de créer notre code CSS , mais supprime également les espaces inutiles afin d'alléger notre feuille de style
De plus, Stylus permet de convertir les fichiers CSS dans son format, et les possibilités offertes par sa syntaxe sont incroyablement variées. Et ce n'est qu'un aperçu. Alors, si cela vous intéresse, je vous invite à en apprendre davantage sur Stylus.