MENOS - Alcance Mixin

Descripción

Los mixins que constan de variables son visibles y se pueden usar en el alcance de la persona que llama. Pero hay una excepción, si la persona que llama contiene una variable con el mismo nombre, esa variable no se copia en el alcance de la persona que llama. Solo las variables dentro del alcance de la persona que llama están protegidas y las variables heredadas se anulan.

Ejemplo

El siguiente ejemplo demuestra el uso del alcance de mezcla en el archivo 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>

A continuación, cree el archivo style.less .

estilo sin

.mixin() {
   @bgcolor: #C0C0C0;
}

.myclass{
   .mixin();
   background-color: @bgcolor;
}

Puede compilar style.less en style.css usando el siguiente comando:

lessc style.less style.css

Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:

style.css

.myclass {
   background-color: #C0C0C0;
}

Salida

Siga estos pasos para ver cómo funciona el código anterior:

Guarde el código html anterior en el less_mixin_as_function_scope.html archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.

Las variables no se pueden anular en el ámbito de los llamadores cuando se definen directamente en él. Para más información haga clic aquí .

↰ Previous page