Qu'est-ce que moins de CSS et comment l'utilisez-vous ?

Si vous êtes un développeur CSS expérimenté, vous serez bien conscient des inconvénients du langage. Il manque toujours un support généralisé pour les fonctionnalités demandées depuis longtemps comme l'imbrication et les mixins.

Less (Leaner Style Sheets) est une extension de CSS avec de nombreuses fonctionnalités puissantes. Si vous connaissez CSS, apprendre Less est facile car la syntaxe de Less est très similaire.

Comment installer moins

Vous pouvez installer Less avec le Gestionnaire de packages JavaScript, NPM en exécutant:

npm installer moins -g

Après l'installation, vous pouvez compiler .moins fichiers à .css en utilisant le moinsc commande. Par exemple, la commande suivante compile sans style et affiche les résultats dans un style.css déposer.

moinsc style.moins style.css

Variables en moins

Contrairement à CSS normal, qui utilise l'opérateur "--" pour définir les variables

, Less définit les variables à l'aide du symbole "@". Par exemple:

@largeur:40px;
@hauteur: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 dans CSS et de les stocker dans une variable. Cela facilite la modification de ces valeurs car il n'y a qu'une seule source de contrôle.

Voici comment vous pouvez utiliser des variables dans Less. Créé un index.htm fichier et ajoutez le code passe-partout suivant :

html>
<htmllangue="fr">
<diriger>
<métajeu de caractères="UTF-8">
<métahttp-equiv="Compatible X-UA"contenu="IE=bord">
<métanom="fenêtre"contenu="width=device-width, initial-scale=1.0">
<lienrel="feuille de style"href="style.css">
<titre>Utiliser moins de CSStitre>
diriger>
<corps>
<div>
 Bonjour des enfants de la planète Terre !
div>
corps>
html>

Ensuite, créez un sans style fichier et ajoutez ce qui suit :

@largeur:400px;
@hauteur:400px;
@centre-vertical : centre;
@txt-blanc : blanc;
@bg-red : RVB(220, 11, 11);
@font-40 :40px;
div {
largeur: @largeur;
hauteur: @hauteur;
afficher: fléchir;
couleur: @txt-blanc;
Couleur de l'arrière plan: @bg-rouge;
taille de police: @font-40;
}

Maintenant, quand vous pouvez compiler le .moins fichier à .css en utilisant le moinsc commande:

moinsc style.moins style.css

Le CSS compilé devrait ressembler à ceci :

div {
largeur: 400pixels;
hauteur: 400pixels;
afficher: fléchir;
couleur: blanc;
Couleur de l'arrière plan: #dc0b0b;
taille de police: 40pixels;
}

Lorsque vous ouvrez votre navigateur, voici ce que vous devriez voir :

Vous pouvez faire beaucoup plus avec les variables dans Less, comme l'interpolation qui vous permet d'utiliser des variables comme noms de sélecteurs, URL, etc. Voici un exemple d'implémentation de l'interpolation de variables :

@sélecteur personnalisé : récipient;
.@{sélecteur-personnalisé} {
rembourrage: 10px;
marge: 10px;
frontière: solide 10px;
}

Le bloc de code ci-dessus utilise le @{...} clause pour utiliser une variable comme sélecteur. Une fois compilé, le code donnera les résultats suivants :

.récipient{
rembourrage: 10pixels;
marge: 10pixels;
frontière: solide 10pixels;
}

Opérations arithmétiques en moins

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;
// Opération de multiplication entre variable et constante
@variable-2 :@variable-1 * 2
// Opération d'addition entre valeur et variable.
@variable-3 :10px + @variable-2

Comment utiliser les mixins

Mixins vous permet de réutiliser les styles (ou le code CSS) dans toute la feuille de style. Autre Extensions CSS comme Sass proposent également des Mixins. Pour illustrer le fonctionnement des mixins dans Less, créez un fichier index.htm et ajoutez le code suivant :

html>
<htmllangue="fr">
<diriger>
<métajeu de caractères="UTF-8">
<métahttp-equiv="Compatible X-UA"contenu="IE=bord">
<métanom="fenêtre"contenu="width=device-width, initial-scale=1.0">
<lienrel="feuille de style"href="style.css">
<titre>Utiliser moins de CSStitre>
diriger>
<corps>
<div>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 triste! 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
 triste! 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
 triste! Voluptate quos autem culpa et sit, assumenda reiciendis
 facilis unde sequi.
p>
corps>
html>

Ensuite, créez un sans style fichier et ajoutez les lignes suivantes :

.exemple-texte() {
Couleur de l'arrière plan: jaune;
}
.première lettre() {
Couleur de l'arrière plan: rouge;
couleur: blanc;
taille de police: 30px;
}
p {
.exemple-texte();
}
p::première lettre {
.première lettre();
}

Dans le bloc de code ci-dessus, il y a deux classes mixin: .exemple-texte et .première lettre. Lorsque vous souhaitez utiliser un mixin dans une autre partie de la feuille de style, référencez-le simplement par son nom avec des parenthèses à la fin: .mixin(). Dans le navigateur, vous devriez voir quelque chose comme ceci :

Imbrication de style dans moins

Disons que vous avez un div parent avec deux éléments comme enfants: un p élément et un autre div. Normalement, si vous voulez styliser le p élément avec la couleur rouge et le div éléments de couleur verte, vous pouvez utiliser l'approche suivante :

divp {
couleur: rouge;
}
div {
couleur: vert
}

Less fournit des fonctionnalités similaires grâce à l'utilisation de imbrication. Donc, dans ce cas, l'équivalent Less du bloc de code ci-dessus serait :

div {
couleur: vert;
p {
couleur: rouge;
 }
}

Non seulement cela est plus facile à comprendre, mais cela rend également le code plus maintenable. Référencer les sélecteurs parents avec less est plus facile avec le & opérateur. Par exemple:

bouton {
Couleur de l'arrière plan: bleu;
frontière: aucun;
&:flotter {
Couleur de l'arrière plan: gris;
transformer: escalader(1.2);
 }
}

Le bloc de code ci-dessus se traduira par le code CSS suivant lors de la compilation :

bouton {
Couleur de l'arrière plan: bleu;
frontière: aucun;
}
bouton:flotter {
Couleur de l'arrière plan: gris;
transformer: escalader(1.2);
}

Comprendre la portée et les fonctions en moins

Comme les langages de programmation classiques, les variables ont la portée du bloc dans lequel vous les définissez. Pour illustrer cela, créez un nouveau index.htm fichier et ajoutez le premier code standard HTML fourni précédemment. Ajoutez ensuite le bloc suivant dans le corps étiqueter:

<divclasse="div externe">
 La division extérieure doit être rouge.
<Br />
<portéeclasse="div-intérieur">
 La div intérieure doit être verte.
portée>
div>

Dans le sans style fichier, ajoutez les lignes suivantes :

@bg-color : rouge;
corps {
taille de police: 40px;
couleur: blanc;
marge: 20px;
}
.inner-div {
@bg-color : vert;
Couleur de l'arrière plan: @bg-color;
}
.outer-div {
Couleur de l'arrière plan: @bg-color;
}

Le div-intérieur bloc redéfinit le bg-couleur variable, limitée à ce bloc uniquement. Ainsi, la couleur verte s'applique uniquement à cette classe et n'affecte pas le global bg-couleur variable. Lorsque vous compilez et ouvrez le résultat dans le navigateur, voici ce que vous devriez voir :

Less fournit également des fonctions pratiques qui peuvent être bénéfiques dans certains scénarios. Par exemple, si vous souhaitez définir un style uniquement si une certaine condition est remplie, vous pouvez le faire avec le si fonction. Cette fonction a la syntaxe suivante :

si((condition), valeur1, valeur2)

Le code revient valeur1 si la condition est remplie et valeur2 sinon. Voici un exemple:

@var1 :20px;
@var2 :20px;
div {
rembourrage: si((@var1 = @var2), 10px, 20px);
}

Le bloc de code ci-dessus devrait aboutir au CSS suivant lorsqu'il est compilé :

div {
rembourrage: 10pixels;
}

Faire plus avec moins et autres extensions CSS

Des milliers de développeurs utilisent Less pour rendre l'écriture 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 que propose Less.

Less convient aux petits comme aux grands projets. Il convient de noter que d'autres langages d'extension CSS tout aussi étonnants comme Sass et Stylus CSS valent le détour.