Vous connaissez peut-être mieux les autres préprocesseurs CSS, mais ne négligez pas ce concurrent.

En matière de développement Web, la manière la plus courante de styliser une application consiste à utiliser CSS. Cependant, CSS peut être fastidieux à utiliser car il est notoirement difficile à déboguer.

Apprenez à utiliser Stylus CSS, et vous aurez une autre option, avec l'un des préprocesseurs CSS les plus populaires disponibles.

Qu'est-ce qu'un préprocesseur CSS?

Les préprocesseurs CSS sont des utilitaires qui facilitent l'écriture de CSS. Ils compilent souvent du code à partir de leur propre syntaxe personnalisée vers le .css format que les navigateurs peuvent comprendre.

Les préprocesseurs CSS comme Sass, par exemple, offrent des fonctionnalités spéciales comme les boucles, les mixins, les sélecteurs imbriqués et les instructions if/else. Ces fonctionnalités facilitent la maintenance de votre code CSS, en particulier dans les grandes équipes.

Pour utiliser un processeur CSS, vous devez installer le compilateur dans votre environnement local et/ou votre serveur de production. Certains outils de construction frontend, comme Vite, vous permettent d'inclure

instagram viewer
Préprocesseurs CSS comme LessCSS dans votre projet.

Comment fonctionne le stylet CSS

Pour installer Stylus dans votre environnement local, vous avez besoin de Node.js et soit Gestionnaire de paquets de nœuds (NPM) ou Fil installé sur votre machine. Exécutez la commande de terminal suivante :

stylet d'installation npm

Ou:

fil ajouter un stylet

Chaque fichier CSS Stylus se termine par un .style extension. Une fois que vous avez écrit votre code CSS Stylus, vous pouvez le compiler avec cette commande :

stylet.

Cela devrait compiler tous les .style fichiers et sortie .css fichiers dans le répertoire courant. Le compilateur Stylus permet également de compiler .css fichiers dans .style avec le --css drapeau. Pour convertir un .css dossier à la .style format, utilisez cette commande :

stylet --css style.css style.style

Syntaxe et sélecteurs parents dans Stylus CSS

En CSS traditionnel, vous définissez un bloc de style avec des accolades; le fait de ne pas inclure ces caractères conduira à des styles brisés. Dans Stylus CSS, l'utilisation d'accolades est facultative.

Stylus prend en charge une syntaxe de type Python, ce qui signifie que vous pouvez définir des blocs à l'aide d'indentations à la place, comme ceci :

.récipient
marge: 10pixels

Le bloc de code ci-dessus se compile en CSS suivant :

.récipient {
marge: 10pixels;
}

Tout comme dans les préprocesseurs CSS comme Less, vous pouvez référencer un sélecteur parent avec le & personnage:

bouton
couleur: blanc;
 &:flotter
couleur: jaune;

Qui se compile en :

bouton {
couleur: #fff;
}
bouton:flotter {
couleur: #ff0;
}

Comment utiliser les variables dans Stylus CSS

Dans les préprocesseurs CSS comme Less CSS, vous définissez des variables avec le @ personnage, alors que le CSS traditionnel utilise "--" pour définir une variable.

Dans Stylus, les choses sont un peu différentes: vous n'avez pas besoin d'un symbole spécial pour définir une variable. Au lieu de cela, définissez simplement la variable en utilisant un signe égal (=) pour le lier à une valeur :

bg-couleur = noir

Vous pouvez maintenant utiliser la variable dans le .style fichier comme celui-ci :

div
Couleur de l'arrière plan: bg-couleur

Les blocs de code ci-dessus se compilent dans le CSS suivant :

div {
Couleur de l'arrière plan: #000;
}

Vous pouvez définir une variable nulle avec des parenthèses. Par exemple:

variable-vide = ()

Vous pouvez référencer d'autres valeurs de propriété à l'aide de la @ symbole. Par exemple, si vous souhaitez définir la hauteur d'un div sur la moitié de sa largeur, vous pouvez procéder comme suit :

largeur d'élément = 563pixels
div
largeur: largeur d'élément
hauteur: (largeur d'élément / 2)

Cela fonctionnerait, mais vous pouvez également éviter de créer complètement la variable et référencer le largeur valeur de la propriété à la place :

div
largeur: 563pixels
hauteur: (@largeur / 2)

Dans ce bloc de code, le @ symbole vous permet de faire référence à la valeur réelle largeur propriété sur le div. Quelle que soit l'approche que vous choisissez, lorsque vous compilez le .style fichier, vous devriez obtenir le CSS suivant :

div {
largeur: 563pixels;
hauteur: 281.5px;
}

Fonctions dans Stylus CSS

Vous pouvez créer des fonctions qui renvoient des valeurs dans Stylus CSS. Supposons que vous souhaitiez définir le aligner le texte propriété d'un div à "centrer" si le largeur est supérieur à 400px, ou "gauche" si le largeur est inférieur à 400px. Vous pouvez créer une fonction qui gère cette logique.

alignCenter(n)
si (n > 400)
 'centre'
autresi (n < 200)
 'gauche'
div {
largeur: 563pixels
aligner le texte: alignCenter(@largeur)
hauteur: (@largeur / 2)
}

Ce bloc de code appelle le alignCenter fonction, en passant le largeur la valeur de la propriété en la référençant avec le @ symbole. Le alignCenter la fonction vérifie si son paramètre, n, est supérieur à 400 et renvoie "center" si c'est le cas. Si n est inférieur à 200, la fonction renvoie "gauche".

Lorsque le compilateur s'exécute, il doit produire la sortie suivante :

div {
largeur: 563pixels;
aligner le texte: 'centre';
hauteur: 281.5px;
}

Dans la plupart des langages de programmation, les fonctions attribuent des paramètres en fonction de l'ordre dans lequel vous les fournissez. Cela peut entraîner des erreurs en raison de la transmission de paramètres dans le mauvais ordre, ce qui est d'autant plus probable que vous devez transmettre plus de paramètres.

Stylus propose une solution: les paramètres nommés. Utilisez-les à la place des paramètres ordonnés lorsque vous appelez une fonction, comme ceci :

soustraire(b:30px, un:10px)/*-20px*/

Quand utiliser un préprocesseur CSS

Les préprocesseurs CSS sont des utilitaires très puissants que vous pouvez utiliser pour rationaliser votre flux de travail. Choisir le bon outil pour votre projet peut vous aider à améliorer votre productivité. Si votre projet ne nécessite qu'une infime quantité de CSS, l'utilisation d'un préprocesseur CSS peut être exagérée.

Si vous construisez un grand projet, peut-être dans le cadre d'une équipe, qui repose sur une énorme quantité de CSS, envisagez d'utiliser un préprocesseur. Ils offrent des fonctionnalités telles que des fonctions, des boucles et des mixins qui facilitent le style de projets complexes.