MOINS - Portée de chargement paresseux variable

La description

Si vous définissez une variable deux fois, la dernière définition de la variable de la portée actuelle est recherchée et utilisée. Cette méthode est similaire au CSS lui-même où la valeur est extraite de la dernière propriété à l'intérieur d'une définition.

Exemple

L'exemple suivant illustre l'utilisation du chargement différé de variable dans une portée différente dans le fichier LESS -

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>LESS Lazy Loading in Different Scope</title>
   </head>

   <body>
      <div class = "myclass">
         <p>Welcome to Tutorialspoint</p>
         <p class="para1">LESS is a CSS pre-processor.</p>
      </div>
   </body>
</html>

Créez maintenant le fichier style.less .

sans style

@var: 10;
.myclass {
   @var: 50;
   .para1 {
      @var: 30;
      font-size: @var;
      @var: 20;
   }
   font-size : @var;
}

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

.myclass {
   font-size: 50;
}

.myclass .para1 {
   font-size: 20;
}

Production

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

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

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