MENO - Interpolazione del selettore con estensione

Descrizione

Il @{variable} il simbolo viene utilizzato come parte del nome della variabile, dell'id e del nome della classe. Extendnon ha la capacità di abbinare il selettore alle variabili. Extend può essere collegato al selettore interpolato.

Esempio

L'esempio seguente mostra l'uso dell'interpolazione del selettore con extent nel file LESS -

extended_syntax.htm

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

   <body>
      <h2 class = "style">This is a simple example of Selector Interpolation</h2>
      <p class = "style">This is a simple example of Selector Interpolation</p>
   </body>
</html>

Quindi, crea il file style.less .

style.less

.style {
   color: #BF70A5;
   font-style: italic;
}
@{variable}:extend(.style) {}
@variable: .selector;

È 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

.style,
.selector {
   color: #BF70A5;
   font-style: italic;
}

Produzione

Segui questi passaggi per vedere come funziona il codice sopra:

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

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