Comment créer un fichier LESS et comment le compiler

Aperçu

A Leaner Style Sheets (LESS) est un langage de prétraitement dynamique dont le langage de base est les feuilles de style en cascade (CSS). Tous les langages de prétraitement sont des versions améliorées du langage de base, LESS possède donc également de nombreuses fonctionnalités supplémentaires. LESS a des fonctions telles que des variables, des sélecteurs parents, des mixins et des sélecteurs imbriqués. En Java, compiler le code source du fichier ".java" générera le fichier de sortie ".class", de même, compiler le fichier ".less" du fichier LESS générera un nouveau fichier " .css" » en sortie.

Méthode

Pour créer et compiler le fichier LESS, nous devons suivre les étapes suivantes -

• Ouvrez le Terminal sur votre bureau ou en ligne de commande (cmd). Utilisez Node Package Manager (npm) pour installer globalement l’environnement Learner Stylesheet (LESS) sur votre ordinateur.

npm install less –g

• Créez un dossier sur votre bureau. Maintenant, ouvrez n'importe quel éditeur de texte et écrivez-y du code LESS .

• Enregistrez le fichier contenant le code ".less" sous "style.less".

• Maintenant, ouvrez l'interface de ligne de commande (CLI) et utilisez la commande nom du dossier cd pour atteindre le sous-dossier dans lequel vous avez créé le fichier « style.less ». "cd" signifie changer de répertoire.

• Après avoir atteint le dossier où se trouve le fichier less, entrez la commande suivante pour compiler "style.less" et un fichier "style.css" sera généré.

lessc style.less > style.css

• Ouvrez le fichier "style.css", le code à l'intérieur sera le code css converti du fichier "style.less".

Caractéristiques

Les principales caractéristiques des feuilles de style Leaner (LESS) sont −

• Variables− Less Language a une fonctionnalité pour créer des variables et y stocker les valeurs des propriétés CSS. Le préfixe pour créer des variables dans moins de fichiers est "@". Par exemple : @width:10rem, @height:10rem, @background : vert, etc.

• Mixing− Cette fonctionnalité offre la possibilité d'écrire du code de style sans duplication. Nous pouvons réutiliser les styles créés ci-dessus comme styles pour d’autres éléments.

Par exemple −

@width:10px; //variables created
@height:@width+10px; //variables created
.box{ //box class is styled using the above variable
   width:@width;
   height:@height;
}
.profile{
   .box(); //.box() is used as mixins to inherit the property of box in profile
}

Algorithme

Étape 1 - Avant de commencer à écrire du code, installez le compilateur less en utilisant la méthode fournie ci-dessus. Si le compilateur "less" est installé, vous pouvez le vérifier sur l'interface de ligne de commande à l'aide de la commande suivante.

lessc –v

Si le compilateur "less" est installé sur votre ordinateur, vous obtiendrez la sortie avec son numéro de version.

Étape 2 − Créez un dossier nommé "LESS" sur le bureau. Créez un fichier HTML dans n’importe quel éditeur de texte et écrivez-y du code passe-partout HTML.

Étape 3 - Créez un fichier "style.less" dans le même dossier et écrivez le code pour styliser la page Web.

@textDecoration:underline;
@background:green;
@color:white;
@textAlign:center;
h1{
   background-color: @background;
   color: @color;
   text-align: @textAlign;
   padding: 1rem;
   border-radius: 5px;
}
span{
   text-decoration: @textDecoration;
}

Étape 4 − Utilisez maintenant l'interface de ligne de commande (CLI) pour accéder au sous-dossier que nous avons créé sur le bureau. Utilisez cd desktop, cd less commandes pour atteindre la destination.

Étape 5 - Utilisez maintenant la commande pour compiler le fichier « style.less ».

lessc style.less > style.css

Étape 6 - Après avoir compilé le fichier, le fichier "style.css" a été créé avec succès. La page Web est maintenant prête à être chargée dans le navigateur avec le style approprié.

Exemple

Dans cet exemple, nous verrons à quoi ressemble la page Web lorsque le fichier less n'est pas compilé, et à quoi elle ressemble une fois compilé. Pour y parvenir, nous allons créer une page web qui relie le fichier css et le fichier « less » dans un dossier.

<html>
<head>
   <link rel="stylesheet" href="style.css">
   <title>LESS Example</title>
   <style>
      @textDecoration:underline;
      @background:green;
      @color:white;
      @textAlign:center;
      h1{
         background-color: @background;
         color: @color;
         text-align: @textAlign;
         padding: 1rem;
         border-radius: 5px;
      }
      span{
         text-decoration: @textDecoration;
      }
      h1 {
         background-color: green;
         color: white;
         text-align: center;
         padding: 1rem;
         border-radius: 5px;
      }
      span {
         text-decoration: underline;
      }
   </style>
</head>
<body>
   <h1>LESS</h1>
   <h1>LESS stands for <span>(Leaner Style Sheets)</span></h1>
</body>
</html>

L'image ci-dessous montre le résultat lors de la compilation de "style.less", lorsque la page Web est construite et liée avec CSS, elle montre la page affichant uniquement la partie HTML sans les styles. Après avoir compilé le fichier "style.less", les styles écrits dans le fichier sont compilés et un fichier style.css est créé qui affiche la sortie de la page Web avec les styles appropriés indiqués ci-dessous.

Conclusion

Lesser Style Sheets (LESS) sont très utiles lors de la construction de grands projets qui nécessitent la maintenance d'un énorme fichier "css". Par conséquent, "LESS" fournit la fonctionnalité de variables, ce qui peut éviter l'encombrement du code. Il est plus facile de gérer le code "LESS" par rapport au "CSS". Par exemple, si nous voulons changer le style d'un bouton sur le site Web, disons que nous devons changer le rayon de la bordure et la couleur d'arrière-plan du bouton, alors nous il suffit d'effectuer deux modifications dans une variable au lieu de modifier le style de chaque élément CSS, ce qui facilite la vie du développeur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!