En matière de développement Web, la manière la plus courante de styliser une application consiste à utiliser CSS. Cependant, CSS peut être lourd à 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.
Table des matières
Qu’est-ce qu’un préprocesseur CSS ?
Les préprocesseurs CSS sont des utilitaires qui facilitent l’écriture de CSS. Ils compilent souvent le code à partir de leur propre syntaxe personnalisée au format .css 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 des 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 de Node Package Manager (NPM) ou Yarn installés sur votre machine. Exécutez la commande de terminal suivante :
npm install stylus
Ou:
yarn add stylus
Chaque fichier CSS Stylus se termine par une extension .styl. Une fois que vous avez écrit votre code CSS Stylus, vous pouvez le compiler avec cette commande :
stylus .
Cela devrait compiler tous les fichiers .styl et produire les fichiers .css dans le répertoire courant. Le compilateur Stylus permet également de compiler des fichiers .css en .styl avec l’indicateur –css. Pour convertir un fichier .css au format .styl, utilisez cette commande :
stylus --css style.css style.styl
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 :
.container
margin: 10px
Le bloc de code ci-dessus se compile en CSS suivant :
.container {
margin: 10px;
}
Tout comme dans les préprocesseurs CSS comme Less, vous pouvez référencer un sélecteur parent avec le caractère & :
button
color: white;
&:hover
color: yellow;
Qui se compile en :
button {
color: #fff;
}button:hover {
color: #ff0;
}
Comment utiliser les variables dans Stylus CSS
Dans les préprocesseurs CSS comme Less CSS, vous définissez les variables avec le caractère @, tandis 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 la lier à une valeur :
bg-color = black
Vous pouvez maintenant utiliser la variable dans le fichier .styl comme ceci :
div
background-color: bg-color
Les blocs de code ci-dessus se compilent dans le CSS suivant :
div {
background-color: #000;
}
Vous pouvez définir une variable nulle avec des parenthèses. Par exemple:
empty-variable = ()
Vous pouvez référencer d’autres valeurs de propriété à l’aide du 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 :
element-width = 563pxdiv
width: element-width
height : (element-width / 2)
Cela fonctionnerait, mais vous pouvez également éviter de créer complètement la variable et référencer à la place la valeur de la propriété width :
div
width: 563px
height: (@width / 2)
Dans ce bloc de code, le symbole @ vous permet de référencer la propriété largeur réelle sur la div. Quelle que soit l’approche que vous choisissez, lorsque vous compilez le fichier .styl, vous devriez obtenir le CSS suivant :
div {
width: 563px;
height: 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 la propriété text-align d’un div sur « center » si la largeur est supérieure à 400px, ou « left » si la largeur est inférieure à 400px. Vous pouvez créer une fonction qui gère cette logique.
alignCenter(n)
if (n > 400)
'center'
else if (n < 200)
'left'div {
width: 563px
text-align: alignCenter(@width)
height: (@width / 2)
}
Ce bloc de code appelle la fonction alignCenter, en transmettant la valeur de la propriété width en la référençant avec le symbole @. La fonction alignCenter 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 {
width: 563px;
text-align: 'center';
height: 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 :
subtract(b:30px, a:10px)
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.