Stylus est un préprocesseur CSS au même titre que Sass et Less. A la fois très accessible et très complet, il n'a rien à leur envier tant il dispose de nombreuses fonctionnalités pour faciliter votre développement CSS.

Le principe d'un préprocesseur CSS consiste à écrire du code dans son propre langage (très proche du CSS standard). Le préprocesseur va ensuite transformer ce code, dans un nouveau fichier, en feuille de style CSS classique.

L'avantage de ce principe est que vous allez pouvoir accéder aux nombreux atouts du préprocesseur.

Débuter avec Stylus

Installer Stylus

Pour utiliser Stylus, il vous faut Node.js. Rendez-vous sur le site de Node.js pour le télécharger puis l'installer.

Après quoi, vous devez utiliser npm pour installer Stylus. Il s'agit en réalité d'une simple commande, à entrer dans le terminal Node.js :

npm install stylus -g

Utiliser Stylus

Pour utiliser Stylus, vous devez créer un fichier .styl puis le compiler en un fichier .css que vous pourrez utiliser dans vos pages web.

Pour faire cette compilation, plusieurs méthodes s'offrent à vous :

  • Utiliser une commande Node.js
stylus -w style.styl -o style.css
  • Utiliser un outil tel que gulp pour optimiser ce processus : gulp-stylus
  • Installer un plugin sur votre éditeur de texte pour compiler le fichier Stylus à l'enregistrement.

Personnellement, c'est cette dernière méthode que j'utilise. La compilation est instantanée. J'utilise Sublime Text avec le plugin Stylus. Il créé ou modifie un fichier .css au même endroit et avec le même nom que votre fichier .styl.

Sélection

Le langage Stylus ressemble bien sûr beaucoup au CSS :

#header
    .content
        text-align center
        padding 60px 0
        .logo
            display inline-block
            height 80px
            width 70px
            color #fff

Exemple du langage Stylus

La tabulation est très importante. Elle va permettre de définir qu'une règle ou qu'un élément est enfant d'un autre. Ce système est très pratique car il permet de supprimer les accolades et de rendre le code beaucoup plus lisible.

Dans cet exemple, text-align center est une règle de .content. De la même façon, .content est un enfant de #header.

Chaque ligne correspond à une instruction : un sélecteur ou une règle.

Vous pouvez également noter que les deux-points, points-virgules et accolades disparaissent. En effet, retour à la ligne + tabulation suffisent. Personnellement, je préfère de loin l'esthétique du code Stylus, c'est tellement plus propre !

Ainsi, le code Stylus ci-dessous, va générer le CSS suivant :

#header .content {
  text-align: center;
  padding: 60px 0;
}
#header .content .logo {
  display: inline-block;
  height: 80px;
  width: 70px;
  color: #fff;
}

Code CSS généré par Stylus

Variables

Stylus va vous permettre d'utiliser des variables. C'est très pratique, notamment pour l'usage des couleurs.

main_color = #fb5642

#header
    background-color main_color
    color #fff
a
    color main_color

Exemple d'utilisation d'une variable avec Stylus

Ici, à la première ligne, nous déclarons une variable main_color, puis nous la réutilisation plus tard comme propriété.

#header {
  background-color: #fb5642;
  color: #fff;
}
a {
  color: #fb5642;
}

Code CSS généré par Stylus

Cet exemple est très simple et assez inutile, mais je suis sûr que vous voyez le potentiel à l'usage d'une telle fonctionnalité.

Mixins

Comme les variables vous allez pouvoir écrire des fonctions que vous allez pouvoir réutiliser plusieurs fois. Ces fonctions vont être appelées des mixins. Elles peuvent prendre des paramètres et permettent d'écrire plusieurs lignes de code d'un seul coup.

Par exemple, voici une mixin pour générer un border-radius sur différents navigateurs :

border-radius(n)
    -webkit-border-radius n
    -moz-border-radius n
    border-radius n

form input[type=button]
      border-radius(5px)

Code de déclaration et utilisation d'une mixin

Dans ce cas, border-radius(n) est une mixin qui prend un seul paramètre. Lorsqu'elle sera appelée, elle écrira les 3 lignes dessous en remplaçant n par la valeur passée.

form input[type=button] {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Code généré par Stylus

Ici l'exemple est très simple, mais les possibilités sont bien entendu très importantes.

Reset

Enfin, vous pourrez trouver deux fichiers .styl sur mon github :

  • reset.styl pour un reset css classique en stylus
  • functions.styl pour automatiquement préfixés les attributs CSS récents

Ces fichiers sont à utilisés de la façon suivante dans votre fichier stylus :

@require 'functions.styl'
@require 'reset.styl'