Share
Le monde du développement Web frontal a de plus en plus recours à ce que nous appelons les "préprocesseurs CSS", qui étendent les fonctionnalités des CSS classiques. Les deux plus connus, avec la plus grande base d'utilisateurs, sont sans doute LESS et Sass / SCSS. Cependant, il existe un troisième préprocesseur qui n'a pas reçu autant d'attention, c'est Stylus.
Aujourd'hui, nous allons expliquer pourquoi Stylus est génial, pourquoi je l'ai choisi et pourquoi il pourrait bien devenir votre nouveau héros CSS..
Avant d’entrer dans les détails du fonctionnement de Stylus, je vais commencer par mon propre point de vue sur les atouts prédominants de LESS et de Sass / SCSS, et pourquoi je ne choisis ni l’un ni l’autre, même si les deux.
Chacun des trois préprocesseurs comprend l'utilisation de variables, de mixins, d'imbrication et d'extension, ainsi que divers degrés d'opérations et de fonctions logiques. Ils sont donc identiques, en ce sens qu’ils vous permettent d’abstraire des éléments de conception de clé, d’utiliser la logique et d’écrire moins de code, ce qui les rend tous plus performants que les CSS bruts bien utilisés..
Cependant, les trois étant identiques dans ce sens fondamental, c’est la différence de différenciation qui conduira à votre choix d’utilisation..
Pour moi, la plus grande force en dehors des aspects communs aux trois pré-processeurs est la communauté autour de LESS et les offres créées par ceux-ci..
Le projet le plus connu intégrant LESS est le framework Twitter Bootstrap, et je suppose que le désir de le travailler est une partie importante de ce qui conduit beaucoup de gens à le faire à LESS..
Une autre particularité est la bibliothèque de mixages LESShat, qui fournit un excellent choix de mixins pour les effets CSS3 et autres, et son partenaire, le plugin CSShat pour Photoshop, qui génère du code copier-coller LESS à partir d'éléments PSD. En particulier, ces deux éléments en tandem créent un flux de travail très puissant, qui est fantastique si vous effectuez beaucoup de processus de conception dans Photoshop..
Et un autre gros avantage pour LESS est le fait que la plupart des gens le trouvent assez facile à utiliser. Vous pouvez utiliser un simple fichier JavaScript pour le compiler à la volée, vous pouvez utiliser un IDE avec une compilation intégrée telle que CrunchApp (ou CodeKit sur Mac uniquement), ou vous pouvez utiliser Node.js sur votre ordinateur local pour un environnement plus robuste. solution de compilation flexible.
Je préfère toujours mon propre code aux frameworks tiers, et j'ai aussi tendance à minimiser la conception de Photoshop ces temps-ci, préférant concevoir autant que possible de manière dynamique dans le navigateur. (CSSHat peut aussi sortir dans plusieurs langues). Donc, pour moi, aussi bons que soient les projets que je décris, ils ne suffisent pas, à eux seuls, à me contraindre à choisir LESS comme préprocesseur de référence..
Mais la principale raison pour laquelle je n'utilise pas LESS est en réalité le gouffre important entre les fonctionnalités de traitement logique disponibles entre ce dernier et les deux autres préprocesseurs principaux..
Malheureusement, moins il y a de fonctionnalités logiques disponibles à l'utilisation, moins nous sommes en mesure de créer un code minimal et propre, et plus le développement et les modifications ultérieures seront lents..
LESS autorise une certaine logique, mais elle est vraiment assez limitante comparée à Stylus et Sass / SCSS. Vous verrez pourquoi dans ma description de ce qui est génial à propos de Sass.
Sass a aussi une grande communauté avec de nombreux projets intéressants à utiliser. Là où LESS a Twitter Bootstrap, Sass a des frameworks comme Gumby et Foundation. Où LESS a LESShat, Sass possède des bibliothèques de mixage telles que Compass et Bourbon.
Cependant, comparé à LESS, il se distingue par sa capacité puissante à gérer la logique. Où LESS est ce que vous pourriez appeler le CSS amélioré, Sass se comporte beaucoup plus comme un langage de programmation complet..
Par exemple, Sass vous permet de créer efficacement des contrôles conditionnels écrits, ce qui est particulièrement utile dans mixins..
Dans Sass, vous pouvez effectuer les tâches suivantes:
@mixin border_and_bg ($ border_on, $ border_color, $ bg_on, $ bg_color) @if $ border_on == true border: 1px solide $ border_color; @else border: 0; @if $ bg_on == true background-color: $ bg_color; @else background-color: transparent;
Ce mixin vérifie si $ border_on est réglé sur vrai, et si oui, il utilise le $ border_color valeur dans la sortie pour le frontière propriété. Si non, il retombe sur le réglage frontière propriété à 0.
Ensuite, il vérifie également si $ bg_on est réglé sur vrai, et si oui, il utilise le $ bg_color valeur dans la sortie pour le Couleur de fond propriété. Si non, il définit le Couleur de fond propriété à transparent
Cela signifie que, selon les valeurs transmises, il est possible de générer jusqu’à quatre types de sortie différents à partir d’un même mixage, à savoir bordure et arrière-plan activés, bordure et arrière-plan désactivés, bordure activée et arrière-plan désactivée, bordure désactivée et arrière-plan activé..
Cependant, dans MOINS, il n’existe pas de vérification "si / autre", ce qui n’est pas possible. Le moins que vous puissiez faire avec LESS consiste à utiliser ce que l'on appelle des "mixins protégés", lorsqu'un mixin donné est sorti différemment en fonction d'une vérification par rapport à une seule expression..
Donc, votre mixin pourrait vérifier si le @border_on paramètre a été mis à vrai ainsi:
.border_and_bg (@border_on, @border_color, @bg_on, @bg_color) lorsque (@border_on = true) border: 1px solid @border_color;
Cependant, comme il manque la fonctionnalité "if / else", il n’a pas non plus la possibilité de vérifier ultérieurement la valeur de @bg_on, ni pour donner une valeur alternative pour la frontière propriété dans le même mixin.
Pour obtenir la même logique que celle utilisée avec un seul mixin Sass, vous devez créer quatre mixins gardés différents avec LESS, à savoir un pour chacune des combinaisons possibles de @border_on et @bg_on valeurs, comme si:
.border_and_bg (@border_on, @border_color, @bg_on, @bg_color) lorsque (@border_on = true) et (@bg_on = true) border: 1px solide $ border_color; couleur de fond: @bg_color; .border_and_bg (@border_on, @border_color, @bg_on, @bg_color) lorsque (@border_on = false) et (@bg_on = false) border: 0; couleur de fond: transparent; .border_and_bg (@border_on, @border_color, @bg_on, @bg_color) lorsque (@border_on = false) et (@bg_on = true) border: 0; couleur de fond: @bg_color; .border_and_bg (@border_on, @border_color, @bg_on, @bg_color) lorsque (@border_on = true) et (@bg_on = false) border: 1px solide @border_color; couleur de fond: transparent;
Et ce n'est que deux valeurs à vérifier. le nombre augmente avec chaque valeur sur laquelle vous souhaitez exécuter une logique, ce qui peut devenir très difficile à gérer si vous souhaitez créer des mixins plus sophistiqués. C'est également un processus ardu de considérer toutes les permutations possibles des combinaisons variables afin de les comptabiliser toutes..
Ce n'est là qu'un exemple parmi d'autres où la logique améliorée rend la vie beaucoup plus facile avec Sass vs LESS, mais il y en a beaucoup plus. Sass offre également d’excellentes capacités d’itération grâce à son @pour, @chaque et @tandis que les directives.
Et enfin, très important, alors que LESS possède d’excellentes fonctions intégrées, Sass facilite très bien la rédaction de vos propres. Ils sont simplement écrits comme:
@function function-name ($ paramètre) @return $ dosomething + $ paramètre / $ quelque chose de différent;
Ces fonctions logiques ouvrent un monde de possibilités comme la création de vos propres moteurs de présentation, la gestion de px à em, les modificateurs de couleur et les raccourcis pour un nombre infini de choses dont vous pourriez avoir besoin, projet par projet..
D'après tout ce que j'ai lu et entendu parler de gens et d'après ma propre expérience, c'est ce pouvoir logique grandement accru qui est le principal facteur qui incite les gens à choisir Sass plutôt que MOINS..
Si LESS est exclu pour la plupart des projets en raison de ses opérations logiques limitées, il s’agit du choix entre Sass et Stylus, qui disposent tous deux d’un puissant éventail de fonctionnalités..
Et entre les deux, j'ai choisi Stylus. Stylet a le pouvoir de Sass, avec l'accessibilité de LESS.
Stylus.js fait tout ce dont j'ai besoin que Sass, mais il ne nécessite que JavaScript ou Node.js pour compiler. De plus, il a un mode de fonctionnement particulier qui est lisse et facile à utiliser, et il a une belle syntaxe nette que je préfère.
Pour moi, l'obligation de faire fonctionner Ruby on Rails et de gérer les gemmes constitue un obstacle majeur au travail avec Sass. Ruby ne fait partie d'aucun des projets que je développe, aussi la seule raison pour laquelle je dois m'occuper de son installation et de tous les joyaux est uniquement de gérer Sass. C'est un ensemble d'erreurs de connexion et de problèmes d'installation dont je n'ai pas besoin si je peux l'éviter.
Je soupçonne que beaucoup d'autres personnes sont également dans le même bateau sans utiliser Ruby autrement, et ne voulant pas spécialement utiliser un pré-processeur CSS..
De plus, même si je dois installer Ruby pour pouvoir utiliser Sass, je dois quand même travailler avec Node.js et NPM pour pouvoir utiliser Grunt afin de gérer d’autres aspects de mes projets, tels que la surveillance des modifications, la combinaison et la minimisation. JavaScript, etc., ainsi que Bower pour la gestion d'autres paquets.
Remarque: Il existe un programme appelé Scout pour Mac et Windows qui gère la compilation pour vous, mais encore une fois, je préfère éviter d'installer quelque chose dans un seul but, plutôt que de travailler avec des outils que je peux utiliser à plusieurs fins. Il y a aussi CodeKit, mais ce n'est que Mac.
Donc, quand il y a un pré-processeur comme Stylus qui a toute la puissance logique dont j'ai besoin, mais qui peut être utilisé facilement avec mon IDE préféré et la configuration existante de Node.js ou du code JavaScript pur, il est logique de le choisir..
De nombreuses personnes trouvent le processus de configuration de Sass intimidant en raison du facteur Ruby et choisissent LESS pour cette raison. Cependant, je trouve que la facilité de configuration de Stylus est essentiellement équivalente à LESS, tout en me donnant toute la gamme des fonctionnalités logiques..
Mais il ne s’agit pas uniquement de Ruby, ni même de la fonctionnalité logique disponible. Cela concerne également le fonctionnement spécifique de Stylus et la syntaxe utilisée, que je trouve incroyablement propre, souple et fluide par rapport à LESS et Sass..
Alors maintenant, laissez-moi vous dire pourquoi j'ai choisi Stylus et pourquoi il pourrait s'agir de votre nouveau héros CSS.
Comme je l'ai déjà mentionné, j'ai choisi Stylus pour:
Pour vraiment vous montrer pourquoi tout ce qui précède fait que je choisis Stylus, nous devons intervenir et commencer à l'utiliser un peu afin que je puisse vous montrer exactement ce dont je parle.
Commençons par le plus gros obstacle rencontré par les pré-processeurs CSS, quel que soit leur choix, à savoir la configuration et la compilation..
Une grande partie de mon choix de Stylus réside dans le fait que je peux l’installer dans le cadre de mes méthodes habituelles de création de projet et que je peux l’utiliser avec mon IDE préféré. Laisse moi te montrer comment.
Oui, certains processus de ligne de commande sont impliqués, mais prenez-le auprès de quelqu'un qui n'avait jamais utilisé la ligne de commande avant que les pré-processeurs ne l'exigent - c'est loin d'être aussi difficile que vous le pensez, et l'utilisation de la ligne de commande vous donnera l'impression Dix pour cent plus intelligent qu'avant. :)
Cela dit, j'ai mis au point un package que vous pouvez récupérer en cliquant sur le bouton "Télécharger" en haut de cet article, ce qui signifie que vous aurez à peine à penser à la ligne de commande si vous utilisez Windows. Quelques clics seulement et vous serez opérationnel.
Si vous utilisez un ordinateur Mac ou Linux, ne craignez rien, car vous ne devez exécuter que trois commandes pour utiliser le paquet, je vous expliquerai comment, et elles sont super faciles.
Ce paquet surveillera les modifications apportées à vos fichiers Stylus source et les compilera dans des fichiers CSS à votre place. Vous pouvez l'utiliser avec n'importe quel IDE que vous voulez, ce qui est un avantage considérable de cette approche particulière.
Pour moi personnellement, c'est le sublime Sublime Text 2. C'est aussi l'IDE que je recommande d'utiliser avec Stylus en raison de l'excellent paquet de surlignages de syntaxe Stylus disponible, que je vais couvrir ci-dessous..
Node.js est quasiment un incontournable de nos jours pour le développement Web frontal. Il y a tellement d'outils incroyables qui fonctionnent par-dessus tout, de sorte que l'installation vous permettra de vous établir non seulement pour Stylus, mais également pour bien d'autres choses..
Allez sur http://nodejs.org/download/ et téléchargez le programme d'installation de votre système d'exploitation..
Exécutez le programme d'installation comme n'importe quel autre utilisateur pour placer Node.js sur votre système..
Grunt est un outil incroyable pour l'exécution de tâches JavaScript. Vous pouvez l'utiliser à plus de deux mille fins via ses plugins, listés ici: http://gruntjs.com/plugins
Dans notre cas, nous allons l'utiliser pour regarder nos fichiers Stylus et les compiler en CSS chaque fois qu'ils changent.
Préparez-vous à votre première expérience en ligne de commande, ouvrez une fenêtre / un terminal de commande.
Sous Windows, je trouve que le moyen le plus simple consiste simplement à ouvrir l'Explorateur Windows, puis dans un dossier, maintenez la touche MAJ enfoncée et cliquez avec le bouton droit de la souris. Dans le menu contextuel, vous verrez ensuite "Ouvrir la fenêtre de commande ici", sur lequel vous devez cliquer:
Vous pouvez également cliquer sur le bouton "Démarrer", puis rechercher "cmd" et appuyer sur Entrée pour afficher la fenêtre de commande..
Si vous êtes sous Linux, j'imagine que vous savez probablement déjà comment ouvrir un terminal, mais si ce n'est pas le cas, voici un guide expliquant comment utiliser les différentes distributions: https://help.ubuntu.com/community/UsingTheTerminal
Et si vous êtes sur Mac, consultez Introduction à la ligne de commande d'un concepteur..
Maintenant, tapez la commande suivante et appuyez sur Entrée:
npm installer -g grunt-cli
Vous verrez une charge de texte comme celle-ci apparaître dans la fenêtre:
Attendez que tout se termine et qu'une nouvelle invite de commande apparaisse. Cela signifie que l'installation est terminée et que vous pouvez ensuite fermer la fenêtre de commande / le terminal. Vous ne devez effectuer cette opération qu'une seule fois, car Grunt sera installé sur votre système avec un accès global afin que vous puissiez l'utiliser à partir de tout futur dossier de projet que vous avez configuré..
Vous êtes maintenant prêt à configurer un projet réel à l'aide du package StylusCompiler que j'ai fourni. C’est le processus que vous allez répéter pour chaque nouveau projet de conception que vous commencez.
Prenons cette étape par étape.
Créez un dossier pour héberger votre projet. Pour cette démo, nous l'appellerons simplement EGProject.
À l'intérieur de cela, créez un deuxième dossier nommé css. C'est le dossier dans lequel vos fichiers CSS seront écrits.
Maintenant extraire le StylusCompiler.zip déposer dans ce dossier.
Vous devriez vous retrouver avec une structure qui ressemble à ceci:
Aller dans le StylusCompiler dossier et, si vous utilisez Windows, double-cliquez sur le fichier nommé double_click_to_install.bat.
Si vous n'êtes pas sous Windows, ouvrez un terminal dans le StylusCompiler dossier (ou ouvrez un terminal puis naviguez / cd dans le dossier). Tapez ce qui suit puis appuyez sur ENTRÉE:
npm installerCela installera le compilateur dans votre dossier de projet. Encore une fois, vous verrez un tas de choses comme celle-ci apparaître dans la fenêtre:
Si vous utilisez Windows et que vous avez double-cliqué sur le fichier .bat, la fenêtre se ferme une fois l'installation terminée. Sinon, attendez que le texte cesse de bouger et qu'une nouvelle invite de commande apparaisse. Gardez votre terminal ouvert pour la prochaine étape. Il ne vous reste plus qu'à lancer la fonction de "surveillance" que le projet vous a configurée pour utiliser via Grunt. Cela va regarder le style dossier à l'intérieur du StylusCompiler dossier pour les modifications à tout .styl les fichiers qu'il contient.
Il suffit de créer tous les fichiers Stylus dont vous avez besoin style dossier et vous êtes prêt à partir. Remarque: Tous vos fichiers Stylus doivent avoir le .styl extension de fichier. Lorsque les modifications sont enregistrées dans les fichiers de ce dossier, le package compilera ensuite votre code Stylus en CSS et l’écrira dans un fichier nommé style.css dans le css dossier de votre projet. Toujours dans le StylusCompiler sous Windows, double-cliquez sur le fichier nommé watch_and_compile.bat.
Si vous n'êtes pas sous Windows, avec votre terminal toujours dans le StylusCompiler dossier, tapez ce qui suit puis appuyez sur Entrée:
grunt regarder
Vous devriez voir ceci dans la fenêtre de commande / terminal:
Maintenant, si vous enregistrez les modifications dans un fichier de la StylusCompiler> stylet dossier, (tant que vous n'avez pas fait d'erreur dans votre code), vous verrez ce qui suit:
Lorsque vous avez fini de travailler sur vos fichiers Stylus, vous pouvez simplement fermer la fenêtre de commande / le terminal ou, si vous devez exécuter une autre commande, vous pouvez appuyer sur CTRL + C pour arrêter la tâche "Regarder"..
L'une des raisons pour lesquelles j'aime travailler avec ce type de configuration de projet est que vous maîtrisez parfaitement votre projet. Vous pouvez donc configurer votre projet comme bon vous semble et le modifier à tout moment. Si vous souhaitez modifier des éléments tels que le dossier de sortie de votre css, le nom du fichier de sortie, si le fichier CSS est compressé ou non, etc., vous pouvez le faire dans le fichier nommé Gruntfile.js dans le StylusCompiler dossier.
Nous utilisons le plug-in grunt-contrib-stylus de Grunt pour gérer la compilation. Vous pouvez ainsi obtenir un récapitulatif complet de toutes les configurations possibles: https://github.com/gruntjs/grunt-contrib-stylus.
Cependant, voici les principales options que vous voudrez probablement.
Met le compresse option de vrai pour une production prête à l'emploi minified CSS, ou à faux pour CSS étendu pendant que vous êtes encore en développement.
Le nom de fichier par défaut qui sera écrit est "style.css". Si vous souhaitez que le fichier soit nommé autrement, remplacez "style.css" par votre choix sur cette ligne..
Par défaut, le compilateur recherchera un niveau parmi les StylusCompiler dossier, et écrire dans le css dossier à l'intérieur.
Si vous voulez que vos fichiers CSS soient écrits ailleurs, changez la valeur sur cette ligne de '… / Css' à votre emplacement préféré.
Comme je l'ai mentionné ci-dessus, la beauté de cette approche est que vous pouvez utiliser n'importe quel IDE pour éditer vos fichiers Stylus et qu'ils compileront exactement la même chose. Cependant, je recommande fortement d'utiliser Sublime Text 2 comme package de mise en surbrillance de la syntaxe Stylus disponible, ce qui rend le travail avec Stylus un plaisir..
Vous pouvez télécharger Sublime Text 2 ici: http://www.sublimetext.com/2.
Après avoir téléchargé et installé, visitez cette page et suivez les instructions pour installer "Package Control", le brillant gestionnaire de paquets pour Sublime Text: https://sublime.wbond.net/installation#st2
Enfin, installez le package de mise en surbrillance de la syntaxe Stylus. Ouvrez Package Control en allant dans Préférences> Package Control comme ceci:
Dans la liste qui apparaît, cliquez sur l'option "Installer le package" et attendez quelques secondes pendant qu'une liste des packages disponibles est récupérée:
Tapez "stylet" dans le champ au-dessus de la liste des packages pour le rechercher, puis cliquez sur le résultat intitulé "Stylet" pour l'installer:
Ce paquet va maintenant devenir délicat à lire, un formatage CSS normal comme ceci:
… En un code formaté Stylus facilement différencié comme ceci:
Une des choses que j’adore dans Stylus est sa flexibilité totale en matière de syntaxe..
Avec LESS, tout le code doit être écrit de la même manière que vous écrivez en CSS normal, c’est-à-dire que vous devez inclure des accolades, des deux points et des points-virgules de la même manière que vous le feriez en CSS..
Avec Sass / SCSS, vous avez le choix:
Par contre, le stylet est totalement flexible et vous n’avez pas à définir d’option de compilation pour gérer votre manière d’écrire..
Tous ces exemples seront compilés dans Stylus, et les approches de la syntaxe peuvent être utilisées ensemble dans le même document:
Seul Stylus autorise l'omission de tous ces éléments de syntaxe, à des degrés divers, et la combinaison «à la volée» de ces approches, de sorte que vous puissiez faire ce que vous souhaitez au fur et à mesure de l'avancement de votre projet..
Cette fonctionnalité est incroyable pour le développement. Vous serez surpris de constater à quel point votre flux est supérieur lorsque vous omettez toute syntaxe "ponctuation" possible. Votre codage et votre processus de pensée à mesure que vous avancez deviendront beaucoup plus fluides. Et avec la coloration syntaxique fournie par le paquet que nous avons installé plus tôt, vous verrez que votre code sera aussi lisible que possible..
Mais en même temps, la compilation est très tolérante. Si vous décidez pour une raison ou une autre que la syntaxe CSS classique rendra une partie de votre document mieux organisée, vous pouvez continuer et l'utiliser à tout moment. Et si vous oubliez accidentellement un point-virgule ici ou là, personne ne vous en empêche.
Vous avez vu ci-dessus quelques exemples de la façon dont les variables, les mixins, les vérifications conditionnelles et les fonctions apparaissent dans LESS et Sass. À mes yeux, je trouve que l’approche Stylus est plus facile à regarder, à lire et à utiliser en général.
Dans LESS, les variables doivent être précédées du @ symbole. En Sass, ils doivent être précédés du $ symbole. Cependant, dans Stylus, une variable ne doit pas être précédée de quoi que ce soit.
Remarque: Vous pouvez éventuellement utiliser le $ symbole si vous préférez, mais pas le @ symbole car celui-ci est réservé à d'autres fins dans Stylus.
De même, les mixins, les contrôles conditionnels et les fonctions n'ont pas besoin d'être ajoutés à rien dans Stylus.
Dans LESS, un mixin doit être écrit de la même manière que vous écrivez dans une classe CSS normale, et il n'y a pas de contrôles conditionnels ni de fonctions personnalisées..
Dans Sass, les mixins doivent être précédés de @mixin et appelé avec @comprendre, les contrôles conditionnels sont écrits comme @si et @autre, et les fonctions doivent être précédées de @une fonction et inclure une ligne précédée de @revenir.
Aucune de ces choses n'est requise dans Stylus. Vous pouvez simplement écrire naturellement comme vous le feriez dans un langage courant. Par exemple, nous avons utilisé précédemment cet exemple Sass mixin and function:
@mixin border_and_bg ($ border_on, $ border_color, $ bg_on, $ bg_color) @if $ border_on == true border: 1px solide $ border_color; @else border: 0; @if $ bg_on == true background-color: 1px solide $ bg_color; @else background-color: transparent;
@function function-name ($ paramètre) @return $ dosomething + $ paramètre / $ quelque chose de différent;
Ce mixin et cette fonction s’appelleraient ainsi:
.callem @include border_and_bg (true, # 000, true, #fff); taille de la police: nom de la fonction (6);
Dans Stylus, ceux-ci pourraient être écrits et appelés comme suit:
Pour moi, cela est très soigné, facile à lire et à écrire, et conforme à l'objectif du préprocesseur de rendre le code propre et minimal.
N'oubliez pas non plus que, même si dans l'exemple ci-dessus, j'ai omis toute la syntaxe "ponctuation" que vous pouvez omettre, son choix est totalement facultatif..
Par exemple, j'ai appelé le border_and_bg mixin de manière transparente, en l'écrivant essentiellement de la même manière que je le ferais avec une propriété CSS normale, sans crochets entre les paramètres ou les virgules. Cependant, si vous préférez, vous pouvez inclure des crochets et des virgules lorsque vous appelez mixins, c'est à vous de choisir..
L'un des meilleurs avantages de travailler avec Sass et LESS sont les bibliothèques de mixage Compass / Bourbon et LESShat, respectivement. Mais vous ne manquerez pas une incroyable bibliothèque de mixins avec Stylus, grâce à Nib.
Le paquetage "StylusCompiler" que je vous ai fourni s’installe automatiquement (grâce à grunt-contrib-stylus) et inclut Nib dans votre projet, vous n’aurez donc pas à faire autre chose pour l’utiliser..
Nib fournit des mixins pour tous les effets CSS3 que vous attendez, chacun d'entre eux pouvant être appelé de manière transparente, comme si vous utilisiez une propriété CSS normale. Il inclut également une gamme impressionnante de mixins pour d’autres fonctions telles que le positionnement, la réinitialisation / normalisation, la correction de pixels, les images réactives, etc..
Consultez la documentation pour un récapitulatif complet ici: http://visionmedia.github.io/nib/
Remarque: Une deuxième option de bibliothèque de mixin pour Stylus est Axis.
Stylus possède de nombreuses autres fonctionnalités impressionnantes, réalisées de manière unique et extrêmement propre. Vous devriez vraiment vérifier le tout ici: http://learnboost.github.io/stylus/
Cependant, il y a un couple en particulier que j'aime vraiment.
Les paramètres de repos vous permettent de transmettre un nombre indéterminé de valeurs à un mixin sans avoir à les mapper explicitement lors de la création du mixin. Vous pouvez extraire une valeur particulière, puis passer le "reste" en utilisant args… et args. Par exemple:
Parfois, vous pouvez répéter une certaine valeur plusieurs fois, mais uniquement dans un style unique. Il peut donc être excessif de déclarer une variable pour la contenir..
Avec la fonctionnalité de recherche de propriété, vous pouvez rechercher la valeur de toute propriété déclarée dans le même style ou dans un style parent. Par exemple:
Tout ce que vous avez à faire est d'utiliser le @ symbole devant la propriété que vous souhaitez rechercher. Stylus examinera d
Accentsconagua