Combinazione di stili / Mixin più avanzato

Descrizione

Utilizzando Extend, possiamo combinare gli stessi stili di un particolare selettore in un altro selettore.

Esempio

Il seguente esempio descrive l'uso della combinazione di stili nel file LESS -

extended_syntax.htm

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

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
         <ul class = "nav">
            <li>HTML</li>
            <li>SASS</li>
            <li>LESS</li>
         </ul>
      </div>
   </body>
</html>

Quindi, crea il file style.less .

style.less

ul.nav > li {
   background-color: #6DE6E6;
   color: black;
}

.cont {
   &:extend(ul.nav > li);
}

È 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

ul.nav > li,
.cont {
   background-color: #6DE6E6;
   color: black;
}

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.