MENO - Passaggio di set di regole a Mixin

Descrizione

Il set di regole separato contiene set di regole come proprietà, set di regole nidificati, dichiarazione di variabili, mixin, ecc. È memorizzato in una variabile e incluso in un'altra struttura; tutte le proprietà del set di regole vengono copiate in quella struttura.

Esempio

L'esempio seguente mostra come passare un set di regole da mixare nel file LESS -

passando_ruleset.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
      </div>
   </body>
</html>

Quindi, crea il file style.less .

style.less

@detached-ruleset: {
   .mixin() {
      font-family: "Comic Sans MS";
      background-color: #AA86EE;
   }
};

.cont {
   @detached-ruleset();
   .mixin();
}

È possibile compilare il file style.less in style.css utilizzando il seguente comando:

lessc style.less style.css

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

style.css

.cont {
   font-family: "Comic Sans MS";
   background-color: #AA86EE;
}

Produzione

Segui questi passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra nel file passing_ruleset.htm file.

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

Scoping

Tutte le variabili e i mixin nel set di regole separato sono disponibili ovunque il set di regole venga chiamato o definito. In caso contrario, per impostazione predefinita sono disponibili sia il chiamante che gli ambiti di definizione. L'ambito della dichiarazione ha la priorità quando entrambi gli ambiti contengono lo stesso mixin o variabile. Il corpo del set di regole separato è definito nell'ambito della dichiarazione. Non cambia il suo ambito dopo che il set di regole scollegato è stato copiato da una variabile a un'altra.

La tabella seguente elenca tutti i tipi di ambito:

Sr.No. Tipi e descrizione
1 Definizione e visibilità dell'ambito del chiamante

Variabili e mixin sono definiti all'interno del set di regole separato.

2 Il riferimento non modifica l'ambito del set di regole scollegato

Fornendo solo i riferimenti, il set di regole non accede a nessun nuovo ambito.

3 Lo sblocco modificherà l'ambito del set di regole scollegato

Il set di regole scollegato può accedere all'ambito venendo importato in esso.