Que pensez-vous de Stylus ? (préprocesseur CSS)

[benjamin_bnds]

Connaissez-vous Stylus ? Je trouve que c’est une alternative intéressante à Sass, je pense que je vais tester sur un petit projet.

[Delapouite]

Je l’utilise depuis pas mal d’années et en suis ravi. Il s’intègre particulièrement bien dans un workflow tout JavaScript ce qui a longtemps été le soucis de Sass qui nécessite soit d’avoir Ruby ou libsass sur sa machine.

On peut facilement jongler entre la syntaxe conventionnelle (superset de CSS) et celle plus épurée (proche de Jade, son alter ego HTML de l’écurie feu TJ Holowaychuck).

Les mixins transparents sont un vrai plus en terme de lisibilité. Bien sur il existe des equivalents à compass, comme nib pour ne citer que lui. Enfin bootstrap est aussi dispo en version stylus pour l’anecdote.

[jeremiecorpinot]

Stylus est très simple d’utilisation et permissif en terme de syntaxe. On peut décider d’écrire du CSS classique ou des choses plus élaborés avec des variables et des fonctions. Je l’utilise quotidiennement sur mes projets io.js de pair avec jade.

[camilleroux]

J’ai déplacé un message dans un nouveau sujet : Utiliser Stylus avec Sublime Text 2 ou 3

[Haeresis]

Ah Stylus, mon petit chouchou.

Concrètement, si tu aimes bien Less car il est intégré dans un écosystème JavaScript, mais que tu le trouves un peu faiblar face à Sass : et bien overkill les deux en avec Stylus (parfait dans un écosystème JavaScript également) :

Je l’adore notamment pour une utilisation BEM !

.loading
  color red

  &--inner
    display block
  
    .as-loaded-page ^[1]
        display none

Ce qui produit :

.loading {
  color: #f00;
}
.loading--inner {
  display: block;
}
.as-loaded-page .loading--inner {
  display: none;
}

Là ou dans une approche traditionnelle j’aurais dû, avec Less ou Sass écrire quelque chose comme ça :

.loading {
  color: red;

  &--inner {
    display: block;
  }
}

.as-loaded-page {
  .loading {
    &--inner {
      display: block;
    }
  } 
}

Pour obtenir là même chose. Ce qui m’arrange pas car ça déporte une mécanique de .loading hors du scope .loading. Là on s’en fou un peu mais dans de gros composants c’est très pratique.

J’utilise Stylus au quotidien. Pour l’utiliser rapidement sur un site Node.js j’utilise NodeAtlas avec l’option stylus :

stylus: true,
routes: {
   ...
}

Sinon y a toujours les petits tests frontaux possible rapidement avec Codepen qui l’inclut aussi

PS : Si la syntaxe vous fait peur, celle ci est totalement valide :

.loading {
  color: red;

  &--inner {
    display: block;
    .as-loaded-page ^[1] {
      display: none;    
    } 
  }
}