Importar archivos CSS a archivos LESS

En LESS, importar hojas de estilo externas es una característica útil para organizar y mantener su código. Sin embargo, es esencial comprender los requisitos específicos al importar diferentes tipos de archivos.

Importar archivos .css

A diferencia de importar otros archivos LESS, importar un archivo .css a un archivo LESS requiere una consideración especial . Simplemente usar la directiva @import como de costumbre no funcionará.

Sintaxis para importar archivos .css

Para importar un archivo .css a un archivo MENOS, necesita usar la siguiente sintaxis:

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

Al especificar la opción (css), le dices explícitamente al compilador LESS que trate el archivo importado como un archivo CSS. Esto asegurará que los estilos CSS dentro del archivo .css estén incluidos en su archivo LESS.

Ejemplo

Considere el siguiente código:

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

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

En este ejemplo, el archivo LESS importa el archivo ../style.css, que contiene una clase llamada .type. Al especificar la opción (css), el compilador LESS reconocerá el archivo importado como un archivo CSS y hará que la clase .type sea accesible dentro de su archivo LESS.

Al seguir esta sintaxis específica, podrá importar y utilizar con éxito Archivos CSS en su código LESS, lo que le permite combinar la funcionalidad de ambos marcos.