MENO - Estendi

Extend è una pseudo classe LESS che estende altri stili di selettore in un selettore usando :extend selettore.

Esempio

L'esempio seguente mostra l'uso di extent nel file LESS:

extended_syntax.htm

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

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

Quindi, crea il file style.less .

style.less

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

È possibile compilare il extend.less file extend.css utilizzando il comando seguente -

lessc style.less style.css

Esegui il comando precedente; creerà automaticamente il file style.css con il seguente codice:

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

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.

Estendi sintassi

Estendi viene inserito nel set di regole o allegato a un selettore. È simile a una pseudo classe contenente una o più classi, separate da virgola. Utilizzando la parola chiave opzionaleall, ogni selettore può essere seguito.

Esempio

L'esempio seguente mostra l'uso della sintassi di estensione nel file LESS:

extended_syntax.htm

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

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         
         <div class = "container">
            <p>Hello!!!!!</p>
         </div>
      
      </div>
   </body>
</html>

Ora crea il file style.less .

style.less

.style:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

È 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 {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 30px;
}

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.

La tabella seguente elenca tutti i tipi di sintassi di estensione che puoi usare in LESS -

Sr.No. Tipi e descrizione
1 Estendi allegato al selettore

Extend è connesso a un selettore che sembra simile a una pseudo classe con selector come parametro.
2 Estendi insieme di regole interne

Il &:extend(selector) la sintassi può essere inserita nel corpo del set di regole.
3 Estensione dei selettori annidati

I selettori annidati vengono abbinati utilizzando il selettore di estensione .
4 Corrispondenza esatta con Estendi

Per impostazione predefinita, extend cerca la corrispondenza esatta tra i selettori.
5 ennesima espressione

La forma dell'ennesima espressione è importante per estendere altrimenti, considera il selettore come diverso.
6 Estendi "tutto"

Quando la parola chiave all è finalmente identificata nel fileextend argomento quindi MENO corrisponde a quel selettore come parte di un altro selettore.
7 Interpolazione selettore con estensione

Il extend collegabile a selettore interpolato.
8 Scoping / Estendi all'interno di @media

Extend corrisponde solo al selettore presente nella stessa dichiarazione multimediale.
9 Rilevamento della duplicazione

Non è in grado di rilevare la duplicazione dei selettori.

Di seguito sono riportati i tipi di casi d'uso per Extend

Sr.No. Tipi e descrizione
1 Caso d'uso classico

Il caso d'uso classico viene utilizzato per evitare di aggiungere la classe base in LESS.
2 Riduzione delle dimensioni CSS

Estendi viene utilizzato per spostare il selettore fino alle proprietà che si desidera utilizzare; questo aiuta a ridurre il codice generato da CSS.
3 Combinazione di stili / Mixin più avanzato

Usando l'estensione possiamo combinare gli stessi stili di un particolare selettore in un altro selettore.