Importando arquivos CSS para arquivos LESS

No LESS, importar folhas de estilo externas é um recurso útil para organizar e manter seu código. No entanto, é essencial entender os requisitos específicos ao importar diferentes tipos de arquivo.

Importando arquivos .css

Ao contrário de importar outros arquivos LESS, importar um arquivo .css para um arquivo LESS requer uma consideração especial. . Simplesmente usar a diretiva @import como de costume não funcionará.

Sintaxe para importar arquivos .css

Para importar um arquivo .css para um arquivo LESS, você precisa usar a seguinte sintaxe:

@import (css) "path/to/style.css";

Ao especificar a opção (css), você diz explicitamente ao compilador LESS para tratar o arquivo importado como um arquivo CSS. Isso garantirá que os estilos CSS no arquivo .css sejam incluídos em seu arquivo LESS.

Exemplo

Considere o seguinte código:

@import (css) "../style.css";

.small {
  font-size: 60%;
  .type;
}

Neste exemplo, o arquivo LESS importa o arquivo ../style.css, que contém uma classe chamada .type. Ao especificar a opção (css), o compilador LESS reconhecerá o arquivo importado como um arquivo CSS e tornará a classe .type acessível em seu arquivo LESS.

Seguindo esta sintaxe específica, você pode importar e utilizar com sucesso Arquivos CSS em seu código LESS, permitindo combinar a funcionalidade de ambas as estruturas.