MENO - Direttive di importazione

Descrizione

Il @importviene utilizzata per importare i file nel codice. Distribuisce il codice LESS su diversi file e consente di mantenere facilmente la struttura del codice. Puoi inserire le istruzioni @import ovunque nel codice.

Ad esempio, puoi importare il file utilizzando @importparola chiave come @import "nome_file.less" .

Estensioni di file

È possibile utilizzare le istruzioni @import a seconda delle diverse estensioni di file come -

  • Se utilizzi l' estensione .css , verrà considerata come CSS e l' istruzione @import rimarrà così com'è.

  • Se contiene altre estensioni, verrà considerato MENO e verrà importato.

  • Se non è presente alcuna estensione LESS, verrà aggiunta e inclusa come file LESS importato.

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

Esempio

L'esempio seguente mostra l'uso della variabile nel file SCSS:

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

   <body>
      <h2>Example of Import Directives</h2>
      <p class = "myline">Welcome to Tutorialspoint...</p>
   </body>
</html>

Quindi, crea il file import_dir.less .

import_dir.less

.myline {
   font-size: 20px;
}

Ora crea il file style.less .

style.less

@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
   color:#FF0000;
}

Il file import_dir.less verrà importato nel file style.less dal percorsohttps://www.tutorialspoint.com/less/import_dir.less.

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

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

Produzione

Segui questi passaggi per vedere come funziona il codice sopra:

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

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