MENO - Ambito di miscelazione

Descrizione

I mixin costituiti da variabili sono visibili e possono essere utilizzati nell'ambito del chiamante. Ma c'è un'eccezione, se il chiamante contiene una variabile con lo stesso nome, allora quella variabile non viene copiata nell'ambito del chiamante. Solo le variabili all'interno dell'ambito del chiamante sono protette e le variabili ereditate vengono sovrascritte.

Esempio

Il seguente esempio dimostra l'uso dell'ambito mixin nel file 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>

Quindi, crea il file style.less .

style.less

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

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

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 {
   background-color: #C0C0C0;
}

Produzione

Segui questi passaggi per vedere come funziona il codice sopra:

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

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

Le variabili non possono essere sovrascritte nell'ambito del chiamante quando sono definite direttamente in esso. Per maggiori informazioni clicca qui .