28172 sujets

CSS et mise en forme, CSS3

[Résolu] Des amateurs de Stylus ?

Conquis depuis quelque temps par la syntaxe Jade, je me penche aujourd'hui sur son alter ego css : j'ai dénommé Stylus.

Bien sûr, il est possible d'obtenir une syntaxe comparable avec Sass, mais j'aime bien le côté encore plus minimaliste de Stylus, et surtout ce dernier est nativement implémenté sur Node.js, langage que j'utilise déjà pour Gulp et tous ses plugins. Je me dis que la compilation sera toujours plus rapide...

Et vous ? Avez-vous une expérience en Stylus ? Quel retour me feriez-vous ?
Modifié par Olivier C (25 Oct 2015 - 22:32)
Salut,

Ouais, j'adore stylus. Sur le principe, j'adore le principe de réduire au maximum le bruit syntaxique (c'est pour ça que je me penche beaucoup sur coffee-script aussi).

Après, j'ai pas fait de benchs pour voir si c'était plus rapide à la compilation qu'avec un autre. Mais je suis en train de mettre mes mixins sur github et codepen.
Je me penche sur la question depuis hiers en parcourant la doc et je suis plutôt embalé. Les interpolations par exemple - ce qui permet d'ajouter des préfixes navigateurs (inutile chez moi car j'utilise Autoprefixer) -, et bien les utilisations des ces dernières sont transparentes sous Stylus, ce qui n'est pas du tout le cas pour Sass. Et tout va de même sous Stylus.

Je pense que je vais adopter Stylus, mais il va me falloir convertir tous mes fichiers .scss...

En fait je m'apperçois que mon choix innitial de préprocesseur (Sass en fichiers .scss) s'est fait suite à des lectures d'articles dont l'argument principal était la critique du caractère éloigné de la syntaxe Stylus par rapport à CSS. Mais quand on prend l'habitude de coder avec tout un tas de syntaxe où est le problème ? Ces arguments sont souvent liés, au mieux, à une volonté d'unifier un workfollow au sein d'une équipe ou, au pire, à une peur de ne pas savoir maîtriser son code de sortie. Dans les deux cas je ne me sens pas concerné.

@Manumanu : merci pour tes exemples de mixins. Décidément j'aime beaucoup cette syntaxe à la javascript.
Modifié par Olivier C (26 Oct 2015 - 14:21)
Dans la même veine, il y a coffee-script pour Javascript, qui se rapproche un peu de ce que ES6 devrait proposer
Manumanu a écrit :
Dans la même veine, il y a coffee-script pour Javascript, qui se rapproche un peu de ce que ES6 devrait proposer

Oui, j'y pense aussi.
Une question @Manumanu : Comment faire pour créer sous Stylus des "fichiers partiels" (terme consacré par Sass) afin d'éviter leur compilation ? (Sous Sass on ajoute un underscore, ex : _buttons.scss).

EDIT : j'ai trouvé la solution en plaçant les fichiers partiels dans un sous-dossier...
Modifié par Olivier C (14 Nov 2015 - 08:53)
Bon et bien c'est fait : j'ai passé la totalité des feuilles de style de mon framework sous Stylus.

Passer de Sass à Stylus n'est pas une mince affaire, et ne compter pas sur des sites tel que sass2stylus.com pour vous faire une conversion correcte. Il vous faut repenser une nouvelle syntaxe.

Certaines fonctionnalités, en apparence les mêmes, ne sont pas calibrées de la même manière ou n'utilisent pas les mêmes algorythmes. Exemple : un lighten() sous Stylus devra prendre une valeur de pourcentage plus importante que le lighten() de Sass, idem pour darken() dans l'autre sens. Pas de grayscale() sous Stylus, mais cette fonction trouvera son équivalent avec un desaturate(valeur, 100%). Ce qui m'a permis de constater que des fonctions Sass font doublon. Pour l'injection de variables dans la fonction calc() j'ai galéré.

Qu'est ce que j'y gagne alors ? Mis à part l'engouement de passer sous une nouvelle techno : sous Gulp c'est un peu plus rapide car Stylus est nativement compilé en Node.js. Je n'ai donc plus besoin de Ruby (je n'utilisais pas LibSass à cause de ses limitations). Mon plus gros fichier prepros est passé de 4087 lignes de code à 3307 lignes en ayant pourtant gagné en clarté.

Bref, que du bonheur.
Modifié par Olivier C (14 Nov 2015 - 20:34)
Sujet clos
Aller à