LESS - Aperçu des variables

La description

La répétition de la même valeur plusieurs fois est généralement observée dans votre feuille de style. Au lieu d'utiliser la même valeur plusieurs fois, des variables peuvent être utilisées. Cela facilite la maintenance du code et ces valeurs peuvent être contrôlées à partir d'un seul emplacement.

Exemple

L'exemple suivant illustre l'utilisation de variables dans le fichier LESS -

<html>
   <head>
     <link rel = "stylesheet" href = "style.css" type = "text/css" />
     <title>LESS variables overview</title>
   </head>

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <div class = "div1">
         <p>LESS is a CSS pre-processor that enables customizable, 
            manageable and reusable style sheet for web site.</p>
      </div>
         
      <div class = "div2">
         <p>LESS is a dynamic style sheet language that extends the capability of CSS. 
            LESS is also cross browser friendly.</p>
      </div>
   </body>
</html>

Créez maintenant le fichier style.less .

sans style

@color1: #ca428b;
.div1 {
   background-color : @color1;
}

.div2 {
   background-color : @color1;
}

Vous pouvez compiler le style.less en style.css en utilisant la commande suivante -

lessc style.less style.css

Exécutez la commande ci-dessus; il créera automatiquement le fichier style.css avec le code suivant -

style.css

h1 {
   color: #D0DC11;
}

.div1 {
   background-color: #ca428b;
   color: #D0DC11;
}

.div2 {
   background-color: #ca428b;
   color: #D0DC11;
}

Production

Suivez ces étapes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code html ci-dessus dans le less_variables_overview.html fichier.

  • Ouvrez ce fichier HTML dans un navigateur, la sortie suivante s'affichera.