MENO - Opzioni di importazione Estendi

Descrizione

Quando un selettore viene esteso, il nuovo selettore viene inserito al posto del riferimento @importistruzione e solo il nuovo selettore è contrassegnato come non referenziato . Possiamo usareextend per evitare questa ridondanza e inserire solo stili mirati specifici.

Esempio

L'esempio seguente mostra l'uso del metodo di estensione nel file LESS:

<html>
   <head>
     <link rel = "stylesheet" href = "style.css" type = "text/css" />
     <title>Import Options Extend</title>
   </head>

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <p class = "para_1">LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p>
      <p class = "para_2">LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p>
   </body>
</html>

Ora crea il file style.less .

style.less

@import (reference)  "http://www.tutorialspoint.com/less/import_options_extend.less";
.para_1 {
   &:extend(.style1);
   background-color: #81F7F3;
}
.para_2 {
   &:extend(.style1);
   background-color: #F6E3CE;
}

Il seguente codice importare l'import_options_extend.less file in style.less dalhttps://www.tutorialspoint.com/less/import_options_extend.less percorso -

import_options_extend.less

.style1 {
   color: #A0A0A0;
   font-family: "Comic Sans MS";
   font-size: 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

.para_1,
.para_2 {
   color: #A0A0A0;
   font-family: "Comic Sans MS";
   font-size: 20px;
}
.para_1 {
   background-color: #81F7F3;
}
.para_2 {
   background-color: #F6E3CE;
}

Produzione

Segui questi passaggi per vedere come funziona il codice sopra:

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

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