LESS - Diretivas de importação

Descrição

o @importdiretiva é usada para importar os arquivos no código. Ele espalha o código LESS por diferentes arquivos e permite manter a estrutura do código facilmente. Você pode colocar as instruções @import em qualquer lugar do código.

Por exemplo, você pode importar o arquivo usando @importpalavra-chave como @import "file_name.less" .

Extensões de arquivo

Você pode usar as instruções @import dependendo das diferentes extensões de arquivo, como -

  • Se você estiver usando a extensão .css , ela será considerada CSS e a instrução @import permanecerá como está.

  • Se contiver qualquer outra extensão, será considerado MENOS e será importado.

  • Se não houver extensão LESS, ele será anexado e incluído como arquivo LESS importado.

@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

Exemplo

O exemplo a seguir demonstra o uso de variável no arquivo 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>

Em seguida, crie o arquivo import_dir.less .

import_dir.less

.myline {
   font-size: 20px;
}

Agora, crie o arquivo style.less .

style.less

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

O import_dir.less arquivo serão importadas para style.less arquivo do caminho.

Você pode compilar o style.less para style.css usando o seguinte comando -

lessc style.less style.css

Execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no import_directives.html Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.