Alternative à CSS : Découverte du préprocesseur Stylus
Dans le domaine du développement web, l’utilisation de CSS est la méthode la plus répandue pour appliquer des styles à une application. Cependant, CSS peut se révéler complexe et fastidieux, notamment en raison de sa difficulté à être débogué efficacement.
L’apprentissage de Stylus CSS vous offre une alternative intéressante, en explorant l’un des préprocesseurs CSS les plus populaires du marché.
Qu’est-ce qu’un préprocesseur CSS ?
Les préprocesseurs CSS sont des outils conçus pour simplifier l’écriture de CSS. Ils ont la particularité de compiler du code, souvent issu de leur propre syntaxe spécifique, en un format .css que les navigateurs peuvent interpréter.
Des préprocesseurs CSS comme Sass, par exemple, proposent des fonctionnalités avancées telles que les boucles, les mixins, les sélecteurs imbriqués et les instructions conditionnelles (if/else). Ces outils améliorent la maintenabilité de votre code CSS, particulièrement au sein d’équipes importantes.
L’utilisation d’un préprocesseur CSS nécessite l’installation du compilateur dans votre environnement local et/ou sur votre serveur de production. Des outils de construction frontend, tels que Vite, permettent d’intégrer des préprocesseurs CSS comme LessCSS à votre projet.
Comment fonctionne Stylus CSS ?
Pour installer Stylus dans votre environnement local, Node.js et Node Package Manager (NPM) ou Yarn doivent être installés sur votre machine. Exécutez la commande suivante dans votre terminal :
npm install stylus
Ou bien :
yarn add stylus
Chaque fichier Stylus CSS possède l’extension .styl. Une fois votre code Stylus écrit, vous pouvez le compiler à l’aide de cette commande :
stylus .
Cette opération compilera tous les fichiers .styl et créera les fichiers .css correspondants dans le répertoire courant. Le compilateur Stylus offre également la possibilité de convertir des fichiers .css en .styl grâce à l’option –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, un bloc de style est délimité par des accolades. L’omission de ces caractères peut entraîner une rupture de style. Stylus CSS offre une flexibilité accrue : l’utilisation des accolades est optionnelle.
Stylus adopte une syntaxe similaire à Python, ce qui signifie que vous pouvez structurer vos blocs à l’aide de l’indentation, comme illustré ci-dessous :
.container margin: 10px
Le bloc de code précédent sera compilé en le CSS suivant :
.container {
margin: 10px;
}
De même que dans d’autres préprocesseurs CSS tels que Less, vous pouvez faire référence à un sélecteur parent en utilisant le caractère & :
button
color: white;
&:hover
color: yellow;
Ce qui se traduira par :
button {
color: #fff;
}
button:hover {
color: #ff0;
}
Comment utiliser les variables dans Stylus CSS
Dans les préprocesseurs CSS comme Less CSS, les variables sont définies avec le caractère @, tandis que CSS utilise « — » pour créer une variable.
Stylus adopte une approche légèrement différente : aucun symbole spécifique n’est nécessaire pour déclarer une variable. Il suffit de définir la variable en utilisant le signe égal (=) pour l’associer à une valeur :
bg-color = black
Vous pouvez ensuite utiliser la variable dans votre fichier .styl de cette manière :
div
background-color: bg-color
Les blocs de code précédents généreront le CSS suivant :
div {
background-color: #000;
}
Il est possible de définir une variable vide en utilisant des parenthèses. Par exemple :
empty-variable = ()
Vous pouvez faire référence à d’autres valeurs de propriété à l’aide du symbole @. Par exemple, si vous souhaitez que la hauteur d’un div soit égale à la moitié de sa largeur, vous pouvez procéder comme suit :
element-width = 563px
div
width: element-width
height : (element-width / 2)
Cette approche fonctionne, mais vous pouvez également éviter de créer une variable et vous référer directement à la valeur de la propriété width :
div
width: 563px
height: (@width / 2)
Dans ce code, le symbole @ permet d’accéder à la valeur de la propriété width du div. Quelle que soit l’approche choisie, lors de la compilation du fichier .styl, vous obtiendrez le CSS suivant :
div {
width: 563px;
height: 281.5px;
}
Fonctions dans Stylus CSS
Stylus CSS vous permet de créer des fonctions qui retournent des valeurs. Imaginons que vous souhaitiez que la propriété text-align d’un div soit égale à « center » si sa largeur dépasse 400px, ou « left » si sa 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 code appelle la fonction alignCenter, en lui transmettant la valeur de la propriété width grâce au symbole @. La fonction alignCenter vérifie si son paramètre, n, est supérieur à 400 et retourne « center » si c’est le cas. Si n est inférieur à 200, la fonction retourne « left ».
Une fois compilé, le résultat devrait être le suivant :
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 ils sont fournis. Cela peut occasionner des erreurs si les paramètres ne sont pas dans le bon ordre, un problème d’autant plus probable que le nombre de paramètres est élevé.
Stylus propose une solution : les paramètres nommés. Ils peuvent être utilisés à la place des paramètres ordonnés lors de l’appel d’une fonction, comme ceci :
subtract(b:30px, a:10px)
Quand utiliser un préprocesseur CSS
Les préprocesseurs CSS sont des outils puissants qui peuvent rationaliser votre flux de travail. Le choix du bon outil pour votre projet peut considérablement améliorer votre productivité. Si votre projet nécessite une quantité limitée de CSS, l’utilisation d’un préprocesseur CSS pourrait être superflue.
Cependant, si vous travaillez sur un projet d’envergure, potentiellement au sein d’une équipe, qui repose sur une quantité importante de CSS, l’utilisation d’un préprocesseur est fortement recommandée. Ils offrent des fonctionnalités telles que les fonctions, les boucles et les mixins, qui simplifient la gestion des styles pour des projets complexes.