MENOS - Alcance de carga diferida variable

Descripción

Si define una variable dos veces, se busca y utiliza la última definición de la variable del ámbito actual. Este método es similar al CSS mismo, donde el valor se extrae de la última propiedad dentro de una definición.

Ejemplo

El siguiente ejemplo demuestra el uso de la carga diferida de la variable en un alcance diferente en el archivo 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>

Ahora cree el archivo style.less .

estilo sin

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

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 {
   font-size: 50;
}

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

Salida

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

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

↰ Previous page