MENO - Mixin con più parametri

Descrizione

I parametri possono essere separati utilizzando virgole o punto e virgola . Usando il simbolo della virgola, puoi interpretarlo come separatore di parametri mixin o separatore di elenco CSS. Se usi il punto e virgola all'interno di mixin, separa gli argomenti con punto e virgola e gli elenchi CSS avranno tutte le virgole.

Include alcuni punti su punto e virgola e virgole come elencato di seguito -

  • Se hai due argomenti, gli argomenti conterranno un elenco separato da virgole. Per esempio,.class1(1, 2, 3; sometext, other thing).

  • Se ci sono tre argomenti, gli argomenti includeranno solo numeri come .class1(1, 2, 3).

  • Puoi usare un punto e virgola fittizio con un elenco separato da virgole come .class1(1, 2, 3;).

  • C'è un valore predefinito separato da virgole. Per esempio.class1(@color: gray, green;)

Sintassi

.mixin_name(@var_name1; @var_name2:some) {
   //code here
}

Esempio

Il seguente esempio dimostra l'uso di mixin più parametri nel file LESS -

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

   <body>
      <h2>Example of Mixin Multiple Parameters</h2>
      <p class = "myclass">LESS enables customizable, manageable and reusable style sheet for web site.</p>
   </body>
</html>

Quindi, crea il file style.less .

style.less

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

.mixin(@color; @padding: 2) {
   color: @color;
   padding: @padding;
}

.myclass {
   .mixin(#FE9A2E);
}

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 {
   color: #FE9A2E;
   padding: 2;
}

Produzione

Segui questi passaggi per vedere come funziona il codice sopra:

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

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