MENO - Parola chiave di riferimento per le opzioni di importazione

Descrizione

Il @import (reference)viene utilizzato per importare file esterni ma non aggiungerà stili importati al file CSS compilato. Questo è stato rilasciato nella versione 1.5.0 .

Esempio

Il seguente esempio dimostra l'uso della parola chiave di riferimento nel file LESS -

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

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

Quindi, crea il file style.less .

style.less

@import (reference) "http://www.tutorialspoint.com/less/import_reference.less";
p {
   .style1;
}

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

import_reference.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

p {
   color: #A0A0A0;
   font-family: "Comic Sans MS";
   font-size: 20px;
}

Produzione

Segui questi passaggi per vedere come funziona il codice sopra:

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

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

Il reference ha il extend metodo che inserisce un nuovo selettore nel punto in cui fai riferimento al file @import dichiarazione e lo contrassegna come not referenced. Per ulteriori informazioni, fare clic qui .