MENO - Parametri con nome

Descrizione

I mixin forniscono i valori dei parametri invece delle posizioni utilizzando i loro nomi. I parametri non hanno alcun ordine per l'inserimento dei valori e possono essere referenziati per nome. Il risultato dei parametri denominati è più facile da leggere e fornisce codici chiari.

Esempio

Il seguente esempio dimostra l'uso di parametri denominati nel file LESS -

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

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

Quindi, crea il file style.less .

style.less

.mixin(@color: black; @fontSize: 10px) {
   color: @color;
   font-size: @fontSize;
}

.class1 {
   .mixin(@fontSize: 20px; @color: #F5A9D0);
}

.class2 {
   .mixin(#F79F81; @fontSize: 20px);
}

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 {
   color: #F5A9D0;
   font-size: 20px;
}

.class2 {
   color: #F79F81;
   font-size: 20px;
}

Produzione

Segui questi passaggi per vedere come funziona il codice sopra:

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

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