CSS-Redundancia cuando se usa LESS y su @import

Me gusta mucho la idea y el concepto de LESS. Sin embargo, me encontré con un error, que informé hace un tiempo al autor, pero que todavía no recibí ningún comentario. Quizás soy solo yo quien está haciendo algo mal.CSS-Redundancia cuando se usa LESS y su @import

Mi application.less -File que se parece a esto:

@import "reset"; 
@import "config"; 
@import "header"; 
@import "forms"; 
[…]

me gusta que es posible utilizar la regla @import para dividir mis archivos para obtener una mejor visión de conjunto de mis CSS-declaraciones. Sin embargo, cada archivo importado necesita volver a importar el config.less-File nuevamente para poder hacer uso de los mixins y variables que definí allí.

Apuesto a que ya sabe sobre qué tipo de redundancia estoy manejando: Cada vez que se importa config.less, su "salida" pasa a formar parte de la aplicación.css.

Mi archivo de configuración contiene aproximadamente 200 líneas de código. Desde que dividí mi CSS, en aproximadamente 5 archivos (basados en mis nombres de controlador) que necesitan volver a importar la configuración, termino teniendo alrededor de 1000 líneas de código CSS generadas que son 100% redundantes.

La única solución que se me ocurre es no dividir mis archivos, lo que realmente me gusta evitar.

Fuente

2010-01-25 Nils Riedemann

Aunque no es ideal, la razón práctica para esto es que los archivos que importa teóricamente no necesitan contener ningún CSS. Normalmente, se tienen variables y mixins dinámicos, que no contribuyen a su salida de CSS:

lib.less:

#colors { 
    @blue: #0011ff; 
    @red: #ee2222; 
} 
.button (@width: 10px) {...}

main.less:

@import "lib"; 

a { color: #colors[@blue]; }

de salida, principal. css:

a { color: #0011ff; }

#colors {} and .button no se emitirá en este caso.

Fuente

2010-01-25 23:01:17 cloudhead

¿Ha pensado implementar algo como @ load/@ require para importar un archivo sin salida? Eso estaría bien. Pero intentaré ajustar mi código de acuerdo con tus sugerencias. –

Y acabo de notar que no puedes usar el anidamiento dentro de mixinas dinámicas. Así que esto realmente no funciona para mí, lamentablemente. –

Sí, para ser honesto, estas son cosas que me gustaría tener eventualmente, pero simplemente no he encontrado el tiempo para implementarlas. – cloudhead

¿Quizás pueda dividirlos en su entorno de desarrollo y luego combinarlos, sin necesitar todo el código adicional, cuando implemente en su servidor web en vivo?

Fuente

2010-01-25 12:55:51

Pero entonces la pregunta es cómo combinar automáticamente. –

Puede usar mixins dinámicas en su archivo de configuración LESS si están declaradas y mezcladas usando $ en lugar de ..

En config.less:

$mixin 
{ 
    a { color: @light; } 
    h2 { //etc. 
}

En header.less:

@import "config"; 
.header 
{ 
    $mixin; 
}

Source. También lo intenté y funciona.

Fuente

2010-12-15 21:53:04

MENOS admite ahora @import-once "stylename.less";

Fuente

2012-10-30 11:57:03 AuthorProxy

CSS-Redundancia cuando se usa LESS y su @import

Respuesta

Cuestiones relacionadas