Apprendre à connaître le stylet

Si vous êtes un développeur frontal, vous avez peut-être entendu parler du stylet, un parent éloigné de Sass, peu connu. Comme Sass, Stylus est également un préprocesseur CSS écrit dans Node.js. Selon sa base de code GitHub, il s'appelle:

[…] Un nouveau langage révolutionnaire qui fournit un moyen efficace, dynamique et expressif de générer des CSS.

Eh bien, "révolutionnaire" peut être un peu exagéré. Mais tout le reste est vrai.

points clés

• Le stylet est un préprocesseur CSS écrit dans Node.js, avec une syntaxe plus lâche que des outils similaires tels que SASS. Il permet des parenthèses, des colons et des demi-colons en option, et prend en charge la syntaxe d'indentation et les styles CSS ordinaires.
• Le stylet prend en charge l'utilisation de variables, de fonctions et de mixins pour rapprocher CSS d'un véritable langage de programmation. Il a également une fonction de recherche de valeur d'attribut et peut sortir des attributs conditionnellement en fonction de la définition de l'attribut.
• Bien que le stylet soit très flexible, l'utilisation du stylet nécessite le respect des règles de syntaxe pour éviter la confusion. Il peut être installé à l'aide de Node.js et NPM et compilé en CSS à l'aide de la commande Stylus. Stylus possède également son propre cadre, NIB, qui fournit des aides supplémentaires et une prise en charge des navigateurs transversaux pour Mixin.

Quoi, un autre? !

un peu comme ça. Mais Stylus n'est pas une toute nouvelle chose. Il existe depuis début 2011, mais je pense qu'il a une communauté assez discrète. Soit dit en passant, saviez-vous que la dernière refonte du réseau de développeur Mozilla a été réalisée avec Stylus? David Walsh, qui a participé au projet, a également écrit sur la façon de commencer avec Stylus.

Alors, quels sont les avantages du stylet par rapport à Sass? Eh bien, il est construit avec Node.js, ce qui à mon avis est un avantage. Bien qu'il soit totalement OK d'utiliser SASS dans un flux de travail de nœud en raison de l'emballage LIBSASS de Node-Sass, cela ne signifie pas que Libsass est entièrement écrit dans le nœud.

De plus, Stylus a une syntaxe extrêmement lâche, qui peut être bonne ou mauvaise, selon votre projet, votre équipe et votre tendance à rester à des normes de codage strictes. Je pense que tant que vous n'incluez pas trop de logique dans la feuille de style et effectuez la vérification du code avant de soumettre le code, la syntaxe lâche devrait être bien.

Dans l'ensemble, le stylet et le SASS prennent en charge presque les mêmes fonctionnalités; Stylus prend également en charge plusieurs syntaxes, bien que les limites soient très floues que Sass: vous pouvez styliser presque comme vous le souhaitez (retrait, style CSS), et peut être mixé et assorti dans la même feuille de style (cet analyseur doit très intéressant).

Alors, qu'en pensez-vous? Vous voulez l'essayer?

débutant

Comme mentionné, Stylus est écrit dans Node.js, afin que nous puissions l'installer comme tout autre package NPM:

<code>$ npm install stylus -g</code>

À partir de là, vous pouvez l'insérer dans votre flux de travail de nœud à l'aide de l'API JavaScript ou utiliser la ligne de commande exécutable pour compiler votre feuille de style. Pour plus de simplicité, nous utiliserons l'outil de ligne de commande du stylet, mais vous pouvez le faire à partir de scripts de nœuds, de gorgée ou de grognement comme vous le souhaitez.

<code>stylus ./stylesheets/ --out ./public/css</code>

La commande précédente indique à Stylus de compiler tous les styles de stylet (.styl) du dossier Stylesheets et de les générer dans le dossier public / css. Bien sûr, vous pouvez également surveiller les changements dans le répertoire:

<code>stylus --watch ./stylesheets/ --out ./public/css</code>

Écriture Stylus Style

Si vous commencez à apprendre et que vous ne voulez pas être submergé par la nouvelle syntaxe, sachez que vous pouvez écrire des CS purs dans votre fichier .styl. Étant donné que Stylus prend en charge la syntaxe CSS standard, il est tout à fait bien d'utiliser le code CSS, puis de l'améliorer lentement.

Syntaxe de base

sur la grammaire elle-même, presque tout est facultatif. Braces: Pourquoi s'embêter? SEMICOLON: Oubliez ça! COLON: Jetez-le aussi. Bracets: s'il vous plaît. Voici le code du stylet entièrement valide:

<code>.foo
.bar
  color tomato
  background deepskyblue</code>

C'est un peu dérangeant au début, mais nous pouvons nous y habituer, surtout s'il y a une mise en évidence de la syntaxe. Comme vous l'avez peut-être deviné, le code précédent se compile à:

<code>.foo, .bar {
  color: tomato;
  background: deepskyblue;
}</code>

variable

La fonction la plus courante d'un préprocesseur CSS doit être la capacité de définir des variables. Il n'est pas surprenant que Stylus l'offre aussi. Bien que contrairement à Sass, ils sont déclarés avec un signe égal (=) au lieu du côlon (:). De plus, le signe du dollar leader ($) est facultatif et peut être omis en toute sécurité.

<code>// 定义 `text-font-stack` 变量
text-font-stack = 'Helvetica', 'Arial', sans-serif;

// 将其用作 `font` 属性的一部分
body
  font 125% / 1.5 text-font-stack</code>

Le stylet fait maintenant quelque chose que Sass ou tout autre préprocesseur: recherche de valeur de la propriété. Supposons que vous souhaitiez appliquer une marge gauche négative égale à la moitié de la largeur;

<code>.foo
  width 400px
  position absolute
  left 50%
  margin-left (@width / 2)</code>

En utilisant @Width, nous disons au stylet d'obtenir la valeur de l'attribut de largeur du bloc actuel, en le traitant comme une variable. Très intelligent! Un autre cas d'utilisation intéressant consiste à sortir conditionnellement les attributs de sortie en fonction de la définition de l'attribut:

<code>.foo
  // ... 其他样式
  z-index: 1 unless @z-index</code>

Dans ce cas, Z-Index sera défini sur 1 à moins que .foo ait attribué une valeur à l'attribut z-index. Utilisez-le conjointement avec Mixin et vous avez vraiment quelque chose.

mixin

En parlant de cela, définissons un mixin car il est probablement l'une des caractéristiques les plus populaires de SASS! Un mixin dans Stylus ne nécessite pas de mot-clé spécifique; il s'agit d'un mélange tant qu'il a des supports (vides ou non vides) à la fin de son nom.

<code>size(width, height = width)
  width width
  height height</code>

De même, le mixin ne nécessite pas de syntaxe spécifique comme @include ou tel:

<code>.foo
  size(100px)</code>

Vous pouvez même supprimer les supports si vous le souhaitez, auquel cas il semble que vous utilisez une propriété CSS complètement standard (mais pas). Ce mécanisme est appelé

mixin transparent parce que leur inclusion est invisible.

<code>.foo
  size 100px</code>

Cela peut ressembler à une astuce inutile à première vue, mais si vous y pensez attentivement, cette fonctionnalité permet en fait à l'auteur d'étendre la syntaxe CSS par défaut. Considérez le mélange de débordement suivant:

<code>$ npm install stylus -g</code>

Si la valeur donnée est ellipsis, il imprime le triple de déclaration bien connu requis pour obtenir un débordement ellipsine à une seule ligne. Sinon, il imprimera la valeur donnée. Ce qui suit est de savoir comment l'utiliser:

<code>stylus ./stylesheets/ --out ./public/css</code>

il produira:

<code>stylus --watch ./stylesheets/ --out ./public/css</code>

Vous devez admettre que c'est une astuce très cool. Bien que cela puisse être déroutant (et peut être dangereux), être capable d'étendre les propriétés CSS standard avec des valeurs supplémentaires est en fait un concept intéressant.

Si vous souhaitez passer du contenu pour mélanger de la manière @content, cela peut être fait avec la variable {Block}. Pendant l'inclusion, il vous suffit d'ajouter avant le nom de mixin pour passer du contenu supplémentaire.

<code>.foo
.bar
  color tomato
  background deepskyblue</code>

Ce code sera compilé comme:

<code>.foo, .bar {
  color: tomato;
  background: deepskyblue;
}</code>

La dernière caractéristique très intéressante de Stylus Mixin: ils ont toujours une variable locale d'arguments contenant tous les paramètres passés au mélange lorsqu'ils sont inclus (le cas échéant). Par exemple, vous pouvez utiliser [..] pour manipuler cette variable comme vous le feriez dans JavaScript pour obtenir la valeur à un index spécifique.

Réflexions finales

Voyager à travers toutes les fonctionnalités et les conseils de syntaxe du stylet sera trop verbeux, et je pense que nous avons déjà eu une bonne introduction, au moins assez pour commencer à apprendre!

Comme vous pouvez le voir, le stylet est très lâche. De tous les aides d'écriture CSS existants, Stylus est certainement l'outil le plus proche pour amener CSS à un véritable langage de programmation.

Notez que Stylus a également son propre framework, tout comme Sass possède Compass, il s'appelle NIB. NIB est une boîte à outils qui fournit un stylet avec des aides supplémentaires et une prise en charge de croisement pour le mixin.

Certaines personnes peuvent l'aimer, certaines personnes peuvent ne pas. Mon conseil est de respecter strictement la grammaire. Il n'est pas toujours facile de gérer une syntaxe aussi lâche. Quoi qu'il en soit, c'est agréable de voir certains des bons concurrents de Sass.

FAQ sur Stylus (FAQ)

Quelles sont les principales différences entre le stylet et les autres préprocesseurs CSS?

Le stylet est une langue de feuille de style dynamique puissante et flexible. Contrairement à d'autres préprocesseurs CSS comme SASS et moins, le stylet permet une utilisation facultative des supports, des colons et des semi-colons, ce qui le rend plus flexible et moins strict. Il prend également en charge la syntaxe d'indentation et les styles CSS réguliers, donnant aux développeurs une plus grande liberté lors de l'écriture de code. De plus, Stylus prend en charge des mixins transparents, ce qui signifie que vous pouvez appeler des mixins sans utiliser de syntaxe spéciale.

Comment installer le stylet?

Le stylet peut être installé à l'aide de Node.js et NPM (Node Package Manager). Tout d'abord, vous devez installer Node.js et NPM sur votre ordinateur. Une fois l'installation terminée, vous pouvez installer Stylus globalement en exécutant la commande NPM Installer Sylus -g dans un terminal ou une invite de commande. Cela vous permettra d'utiliser le stylet à partir de n'importe quel répertoire de votre ordinateur.

Comment compiler le stylet en CSS?

Après avoir écrit du code de stylet, vous pouvez le compiler dans CSS à l'aide de la commande Stylus dans l'invite de terminal ou de commande. Par exemple, si votre fichier de stylet est nommé style.styl, vous devez exécuter la commande stylet -c style.styl. Cela créera un fichier CSS nommé style.css dans le même répertoire.

Puis-je utiliser des variables dans le stylet?

Oui, Stylus prend en charge l'utilisation des variables. Vous pouvez définir des variables en attribuant des valeurs aux noms. Par exemple, font-size = 14px. Vous pouvez ensuite utiliser cette variable ailleurs dans votre code en faisant référence à son nom, comme: P {Font-Size: Font-Size;

est-ce que le stylet prend en charge les fonctions et mixin?

Oui, Stylus prend en charge les fonctions et le mixin. Les fonctions dans le stylet sont définies à l'aide du mot clé DEF et peuvent être utilisées pour effectuer des calculs ou fonctionner sur des valeurs. D'un autre côté, Mixin est un bloc de code réutilisable qui peut être inclus dans d'autres ensembles de règles.

Comment utiliser les instructions conditionnelles dans Stylus?

Le stylet prend en charge les instructions conditionnelles à l'aide des mots clés if, else if et else. Ceux-ci peuvent être utilisés pour appliquer différents styles en fonction de certaines conditions. Par exemple, vous pouvez utiliser des instructions conditionnelles pour appliquer différentes tailles de police en fonction de la taille de l'écran.

Puis-je importer d'autres fichiers de stylet?

Oui, Stylus vous permet d'importer d'autres fichiers de stylet à l'aide de la directive @Import. Ceci est utile pour organiser le code dans des fichiers séparés et réutiliser le code dans plusieurs feuilles de style.

Le stylet prend-il en charge les boucles?

Oui, le stylet prend en charge pour et bien que les boucles. Ceux-ci peuvent être utilisés pour générer des règles CSS en double ou des listes et des tableaux.

Puis-je utiliser Stylus avec Node.js?

Oui, le stylet peut être utilisé avec Node.js. En fait, Stylus est construit sur Node.js et peut être installé à l'aide de NPM (Node Package Manager). Vous pouvez également utiliser Stylus avec Express, un cadre d'application Web populaire pour Node.js.

Comment déboguer le code du stylet?

Stylus fournit un indicateur - debug qui peut être utilisé pour produire des informations de débogage. Ceci est utile pour suivre les erreurs ou comprendre comment votre code est géré. De plus, vous pouvez utiliser la fonction inspective () dans Stylus pour produire les valeurs d'une variable ou d'une expression.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!