Si vous êtes un développeur CSS expérimenté, vous connaissez bien les inconvénients du langage. Il ne prend toujours pas en charge les fonctionnalités les plus demandées, telles que l’imbrication et les mixins.
Less (Leaner Style Sheets) est une extension de CSS dotée de nombreuses fonctionnalités puissantes. Si vous connaissez CSS, il est facile d’apprendre Less car sa syntaxe est très similaire.
Comment installer Less
Vous pouvez installer Less avec le gestionnaire de paquets JavaScript, NPM, en exécutant :
npm install less -g
Après l’installation, vous pouvez compiler .less fichiers vers .css Utilisation de l’option lessc . Par exemple, la commande suivante compile style.less et produit les résultats dans un fichier style.css fichier.
lessc style.less style.css
Variables dans Less
Contrairement au CSS classique, qui utilise l’opérateur « — » pour définir les variables, Less définit les variables à l’aide du symbole « @ ». Par exemple, Less définit les variables en utilisant le symbole « @ » :
@width: 40px;
@height: 80px;
Le bloc de code crée simplement deux variables, width et height, qui contiennent respectivement deux valeurs : 40px et 80px. Il est courant de prendre des valeurs couramment utilisées en CSS et de les stocker dans une variable. Il est ainsi plus facile de modifier ces valeurs car il n’y a qu’une seule source de contrôle.
Voici comment utiliser les variables dans Less. Créez une index.htm et ajoutez le code boilerplate suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Using Less CSS</title>
</head>
<body>
<div>
Hello from the children of planet Earth!
</div>
</body>
</html>
Ensuite, créez un fichier style.less et ajoutez ce qui suit :
@width: 400px;
@height: 400px;
@vertical-center: center;
@txt-white: white;
@bg-red: rgb(220, 11, 11);
@font-40: 40px;
div {
width: @width;
height: @height;
display: flex;
color: @txt-white;
background-color: @bg-red;
font-size: @font-40;
}
Maintenant, lorsque vous pouvez compiler le fichier .less fichier vers .css Utilisation de l’option lessc commande :
lessc style.less style.css
Le CSS compilé devrait ressembler à ceci :
div {
width: 400px;
height: 400px;
display: flex;
color: white;
background-color: #dc0b0b;
font-size: 40px;
}
Lorsque vous ouvrez votre navigateur, voici ce que vous devriez voir :
Il y a beaucoup d’autres choses que vous pouvez faire avec les variables dans Less, comme l’interpolation qui vous permet d’utiliser les variables comme noms de sélecteurs, URLs, et plus encore. Voici un exemple de mise en œuvre de l’interpolation de variables :
@custom-selector: container;
.@{custom-selector} {
padding: 10px;
margin: 10px;
border: solid 10px;
}
Le bloc de code ci-dessus utilise la variable @{…} pour utiliser une variable comme sélecteur. Une fois compilé, le code donnera le résultat suivant :
.container{
padding: 10px;
margin: 10px;
border: solid 10px;
}
Opérations arithmétiques dans Less
Less prend également en charge les opérations arithmétiques telles que l’addition, la soustraction, la division et la multiplication. Ces opérations fonctionnent avec des constantes, des valeurs et des variables.
@variable-1: 5px;
// Multiplication Operation between variable and constant
@variable-2: @variable-1 * 2
// Addition operation between value and variable.
@variable-3: 10px + @variable-2
Comment utiliser les mixins
Les mixins vous permettent de réutiliser les styles (ou le code CSS) dans toute la feuille de style. D’autres extensions CSS, comme Sass, proposent également des mixins. Pour illustrer le fonctionnement des mixins dans Less, créez un index.htm et ajoutez le code suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Using Less CSS</title>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
architecto repudiandae ipsum animi velit id iste dolore reprehenderit
dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
facilis unde sequi.
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
architecto repudiandae ipsum animi velit id iste dolore reprehenderit
dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
facilis unde sequi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
architecto repudiandae ipsum animi velit id iste dolore reprehenderit
dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
facilis unde sequi.
</p>
</body>
</html>
Ensuite, créez un fichier style.less et ajoutez les lignes suivantes :
.sample-text() {
background-color: yellow;
}
.first-letter() {
background-color: red;
color: white;
font-size: 30px;
}
p {
.sample-text();
}
p::first-letter {
.first-letter();
}
Dans le bloc de code ci-dessus, il y a deux classes mixtes : .sample-text et .première lettre. Pour utiliser un mixin dans une autre partie de la feuille de style, il suffit d’y faire référence par son nom, avec des parenthèses à la fin : .mixin(). Dans le navigateur, vous devriez voir quelque chose comme ceci :
L’imbrication des styles dans Less
Supposons que vous ayez une div parent avec deux éléments comme enfants : a p élément et autre div. D’ordinaire, si vous voulez styliser l’élément p avec la couleur rouge et l’élément div avec la couleur verte, vous pouvez utiliser l’approche suivante :
div p {
color: red;
}
div {
color: green
}
Less offre une fonctionnalité similaire grâce à l’utilisation de imbrication. Ainsi, dans ce cas, l’équivalent Less du bloc de code ci-dessus serait :
div {
color: green;
p {
color: red;
}
}
Ce n’est pas seulement plus facile à comprendre, cela rend aussi le code plus facile à maintenir. Le référencement des sélecteurs parents avec less est plus facile avec la méthode & ; opérateur. Par exemple :
button {
background-color: blue;
border: none;
&:hover {
background-color: grey;
transform: scale(1.2);
}
}
Le bloc de code ci-dessus produira le code CSS suivant lorsqu’il sera compilé :
button {
background-color: blue;
border: none;
}
button:hover {
background-color: grey;
transform: scale(1.2);
}
Comprendre la portée et les fonctions dans Less
Comme dans les langages de programmation classiques, les variables ont la portée du bloc dans lequel vous les définissez. Pour illustrer ceci, créez un nouveau index.htm et ajoutez le premier code HTML boilerplate fourni précédemment. Ajoutez ensuite le bloc suivant dans le fichier corps tag :
<div class="outer-div">
Outer Div should be red.
<br />
<span class="inner-div">
Inner div should be green.
</span>
</div>
Dans le style.less ajouter les lignes suivantes :
@bg-color: red;
body {
font-size: 40px;
color: white;
margin: 20px;
}
.inner-div {
@bg-color: green;
background-color: @bg-color;
}
.outer-div {
background-color: @bg-color;
}
Le inner-div Ce bloc redéfinit le bg-color qui ne s’applique qu’à ce bloc. La couleur verte ne s’applique donc qu’à cette classe et n’affecte pas la variable globale bg-color variable. Lorsque vous compilez et ouvrez le résultat dans le navigateur, voici ce que vous devriez voir :
Less propose également des fonctions pratiques qui peuvent s’avérer utiles dans certains cas. Par exemple, si vous voulez définir un style seulement si une certaine condition est remplie, vous pouvez le faire avec la fonction if fonction. Cette fonction a la syntaxe suivante :
if((condition), value1, value2)
Le code renvoie valeur1 si la condition est remplie et valeur2 sinon. Voici un exemple :
@var1: 20px;
@var2: 20px;
div {
padding: if((@var1 = @var2), 10px, 20px);
}
Le bloc de code ci-dessus devrait donner le CSS suivant lorsqu’il est compilé :
div {
padding: 10px;
}
Faire plus avec moins et autres extensions CSS
Des milliers de développeurs utilisent Less pour rendre l’écriture de CSS un peu plus agréable. Des fonctionnalités étonnantes comme les fonctions, les mixins et les variables ne sont qu’une petite partie de ce qu’offre Less.
Less convient aussi bien aux petits qu’aux grands projets. Il convient de noter que d’autres langages d’extension CSS tout aussi étonnants, tels que Sass et Stylus CSS, valent la peine d’être consultés.
