MOINS - Portée Mixin

La description

Les variables ne peuvent pas être remplacées dans la portée de l'appelant lorsqu'elles y sont définies directement. Cependant, les variables ne sont pas protégées et seront remplacées lorsqu'elles sont définies dans la portée parent des appelants.

Exemple

L'exemple suivant illustre l'utilisation de la portée mixin dans le fichier LESS -

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Mixins Scope</title>
   </head>

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

Ensuite, créez le fichier style.less .

sans style

@val: 20px; // callers parent scope - no protection
.mixin() {
   @val: 10px;
   @definedOnlyInMixin: 10px;
}

.myclass {
   padding-left: @val * @definedOnlyInMixin;
   .mixin();
}

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 {
   padding-left: 100px;
}

Production

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

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

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

less_mixins_as_functions