MENO - Corrispondenza esatta con Estendi

Descrizione

Per impostazione predefinita, il extendcerca la corrispondenza esatta tra i selettori. L'estensione non ha importanza quando si tratta di due ennesime espressioni con lo stesso significato, ma cerca solo la stessa forma d'ordine definita affinché il selettore corrisponda.

Esempio

Il seguente esempio dimostra l'uso della corrispondenza esatta con extend nel file LESS -

extended_syntax.htm

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

   <body>
      <div class = "style">
         <h3>Hello!!!!!</h3>
      </div>
      <h4 class = "img">Welcome to TutorialsPoint</h4>
   </body>
</html>

Quindi, crea il file style.less .

style.less

.style h3,
h3.style {
   color: #BF70A5;
   font-style: italic;
}
.img:extend(.style h3){}

Il .style h3 dovrebbe essere definito nello stesso modo in extended come definito per selector. Se definisci in extendi come .style, estendi lo considera diverso.

È 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 h3,
h3.style,
.img {
   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.