LESS - Variables par défaut

La description

La variable par défaut a la capacité de définir une variable uniquement lorsqu'elle n'est pas déjà définie. Cette fonctionnalité n'est pas nécessaire car les variables peuvent être facilement remplacées en les définissant par la suite.

Exemple

L'exemple suivant illustre l'utilisation de variables par défaut dans le fichier LESS -

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

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <p>LESS is a CSS pre-processor that enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Créez maintenant le fichier style.less .

sans style

@import "http://www.tutorialspoint.com/less/lib.less"; // first declaration of @color
@color: green; // this will override @color defined previously
p {
   color : @color;
}

Le code suivant importera le lib.less fichier dans style.less de la chemin -

lib.less

@color: blue;

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

p {
   color: green;
}

Production

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

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

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