MENO - Guardie Mixin

Descrizione

Se vuoi far corrispondere valori semplici o numero di argomenti nelle espressioni, puoi usare guards. È associato alla dichiarazione di mixin e include la condizione allegata a un mixin. Ogni mixin avrà una o più guardie separate da virgola; una guardia deve essere racchiusa tra parentesi. MENO utilizza mixin protetti invece diif/else dichiarazioni ed esegue calcoli per specificare il mixin abbinato.

La tabella seguente descrive i diversi tipi di protezioni mixin insieme alla descrizione.

Sr.No. Tipi e descrizione
1 Operatori di confronto di guardia

Puoi utilizzare l'operatore di confronto (=) per confrontare numeri, stringhe, identificatori, ecc.
2 Operatori logici di guardia

È possibile utilizzare la parola chiave e per aggirare gli operatori logici con le guardie.
3 Tipo di controllo delle funzioni

Contiene le funzioni integrate per determinare i tipi di valore per la corrispondenza dei mixin.
4 Mixin condizionali

LESS utilizza la funzione predefinita per abbinare il mixin con altri match di mixaggio.

Esempio

Il seguente esempio dimostra l'uso di mixin guards nel file LESS -

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

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

Ora crea il file style.less .

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

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

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

Produzione

Segui questi passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra nel file mixin-guard.html file.

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