loop - importar el archivo.css en el archivo.less

less tutorial

Question

¿Puedes importar archivos .css en archivos .less ...?

Estoy bastante familiarizado con menos y lo uso para todo mi desarrollo. Regularmente uso una estructura de la siguiente manera:

@import "normalize";

//styles here

@import "mixins";
@import "media-queries";
@import "print";

Todas las importaciones son otros archivos .less y todo funciona como debería.

Mi problema actual es el siguiente: quiero importar un archivo .css a .less que haga referencia a los estilos utilizados en el archivo .css de la siguiente manera:

@import "../style.css";

.small {
    font-size:60%;
    .type;
}
// other styles here

El archivo .css contiene una clase llamada .type pero cuando intento compilar el archivo .less obtengo el error NameError: .type is undefined

¿El archivo .less no importará archivos .css, solo otros .less ...? ¿O me estoy refiriendo mal ...?!

Answer 1

Desde el sitio web de LESS :

Si desea importar un archivo CSS y no quiere que LESS lo procese, simplemente use la extensión .css:

@import "lib.css"; La directiva se dejará como está y terminará en la salida de CSS.

Como señala jitbit en los comentarios a continuación, esto solo es realmente útil para propósitos de desarrollo, ya que no querría tener un ancho de banda precioso que consume @import s innecesario.

Answer 2

Puede forzar que un archivo se interprete como un tipo particular especificando una opción, por ejemplo:

@import (css) "lib";

dará salida

@import "lib";

y

@import (less) "lib.css";

importará el archivo lib.css y lo tratará como menos. Si especifica que un archivo es menor y no incluye una extensión, no se agregará ninguno.

Answer 3

Si desea importar un archivo css que se debe pisar como menos use esta línea:

.ie {
  @import (less) ''ie.css'';
}

Answer 4

Si desea que su CSS se copie en la salida sin ser procesado, puede usar la directiva (inline) . p.ej,

@import (inline) ''../timepicker/jquery.ui.timepicker.css'';

Answer 5

Si solo desea importar un archivo CSS como referencia (por ejemplo, para usar las clases en Mixins) pero no incluir todo el archivo CSS en el resultado, puede usar @import (less,reference) "reference.css"; :

my.less

 @import (less,reference) "reference.css";
 .my-class{
     background-color:black;
     .reference-class;
     color:blue;
 }

referencia.css

.reference-class{
    border: 1px solid red;
}

* Resultado (my.css) con lessc my.less out/my.css *

.my-class {
  background-color: black;
  border: 1px solid red;
  color: blue;
}

Estoy usando lessc 2.5.3

Answer 6

Tuve que usar lo siguiente con la versión 1.7.4.

@import (less) "foo.css"

Sé que la respuesta aceptada es @import (css) "foo.css" pero no funcionó. Si desea reutilizar su clase css en su nuevo archivo less, necesita usar (less) y no (css) .

Consulte la documentation .

Answer 7

desde 1.5.0 u puede utilizar la palabra clave ''inline''.

Ejemplo: @import (inline) "not-less-compatible.css";

Usará esto cuando un archivo CSS no sea menos compatible; esto se debe a que, aunque Less admite la mayoría de los estándares CSS conocidos, no admite comentarios en algunos lugares y no admite todos los hacks CSS conocidos sin modificar el CSS. Así que puedes usar esto para incluir el archivo en la salida, de modo que todo el CSS esté en un archivo.

(fuente: http://lesscss.org/features/#import-directives-feature )

Answer 8

Cambie la extensión de archivo de su archivo css a .less . No necesitas escribir MENOS en ello; todo CSS es válido MENOS (excepto de las cosas de MS de las que tienes que escapar, pero ese es otro problema).

Por la respuesta de Fractalf, esto está arreglado en v1.4.0

Answer 9

Prueba esto :

@import "lib.css";

De la Documentación Oficial:

Puedes importar tanto css como menos archivos. Solo se procesan menos sentencias de importación de archivos, las declaraciones de importación de archivos css se mantienen tal como están. Si desea importar un archivo CSS y no quiere que LESS lo procese, simplemente use la extensión .css:

Fuente: http://lesscss.org/