MENO - Ambito di caricamento lento variabile

Descrizione

Se si definisce una variabile due volte, viene cercata e utilizzata l'ultima definizione della variabile dall'ambito corrente. Questo metodo è simile al CSS stesso in cui il valore viene estratto dall'ultima proprietà all'interno di una definizione.

Esempio

Il seguente esempio dimostra l'uso del caricamento lento di variabili in un ambito diverso nel file 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>

Ora crea il file style.less .

style.less

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

Puoi compilare style.less in style.css usando il seguente comando:

lessc style.less style.css

Esegui il comando precedente; creerà automaticamente il file style.css con il seguente codice:

style.css

.myclass {
   font-size: 50;
}

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

Produzione

Segui questi passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra nel file less_lazy_loading_scope.html file.

  • Apri questo file HTML in un browser, verrà visualizzato il seguente output.