Less.js: propiedades duplicadas al @importar varias veces (@import anidado)

Creado en 25 jun. 2010  ·  49Comentarios  ·  Fuente: less/less.js

Maestro @importaciones A y B,
B @importaciones A

Cuando se usa un mixin de A en el archivo maestro, las propiedades se duplican

Consulte la prueba unitaria para obtener más información.

Configuración: lessc cli versión 1.0.21 en ubuntu 10.04

Todos 49 comentarios

Supongo que el problema es que el archivo se importa dos veces, ese es el comportamiento correcto para los mixins.

¿Crees que debería importar el archivo dos veces? De lo contrario, también debería tener en cuenta las URL relativas. Por ejemplo

// in main.less
<strong i="6">@import</strong>: imports/import1.less;
<strong i="7">@import</strong>: imports/import2.less;

// in imports/import1.less
<strong i="8">@import</strong>: import2.less; // don't import this
<strong i="9">@import</strong>: imports/import2.less; // do import this

hmmm, me pregunto si hay una manera más fácil de verificar si un archivo es igual a otro archivo. Quizás algo en los encabezados.

El tamaño del archivo es un indicador económico y probablemente sea único en cualquier conjunto de archivos fuente. Sin embargo, es _posible_ tener 2 archivos con el mismo tamaño.

Del mismo modo con la fecha de modificación.

Si el servidor establece el encabezado ETag, puede / debe usarlo.

Usamos el hash MD5 del contenido del archivo como clave al almacenar en caché, pero personalmente creo que eso es excesivo.

hmmm, sí, el problema es que javascript no tiene MD5 nativo, o lo usaría ...
ETag sería ideal, pero algunos servidores no lo configuran. Tendré que pensar en esto.

Parece que estamos de acuerdo en que los archivos no se deben importar dos veces. Sin embargo, ¿es siempre cierto? (es decir, con la ayuda del alcance, importar en un mínimo podría estar bien; en la nube, puedes responder mejor que yo en este caso).

Muchos idiomas ya han resuelto este problema de diferentes formas:

  • C -> #ifndef / #define / #endif
  • PHP -> include_once()

La "forma C" puede ser un poco más difícil de implementar, pero los condicionales pueden ofrecer otras grandes posibilidades.

Si se elige la "forma PHP", debemos elegir una forma de diferenciar los archivos. La URL absoluta parece una buena elección (la tenemos directamente o mediante document.location + URL relativa); creo que es mejor que size / length / MD5 porque no consume una solicitud HTTP.
Sin embargo, puede que no sea suficiente: cada URL se asigna a un solo archivo, pero cada archivo se puede asignar a varias URL. En tal caso, la introducción de una nueva palabra clave @<strong i="16">@name</strong>: <unique name> podría ayudar.

El algoritmo @import_once sería entonces: si la URL absoluta aún no se ha importado, obtenga los archivos y verifique si el @ @name ya se ha importado, si no, importe el archivo.

Estoy de acuerdo. dentro del contexto de una sola solicitud, debería poder asumir que los recursos no cambian. por lo que las URL absolutas deberían ser lo suficientemente buenas.

comprobar si hay cambios en los archivos es otro asunto.

Creo que deberíamos mantener la importación de @import varias veces porque así es como funciona @import original,

Me gusta la solución php de @vicb , pero en lugar de

¿Podemos agregar algo como esto en la parte superior del archivo .less?
/ _! requiere: url (./abc.less)_/

Yo también estoy experimentando este problema. Mi proyecto tiene una jerarquía de archivos MENOS que se compilan en un solo archivo .css. Hay un archivo de utilidad LESS que se incluye en varios archivos; al final, todos los mixins se duplican la misma cantidad de veces que se ha importado ese archivo de utilidad.

Una @import_once , o quizás @import : once url ('url'); resolvería este problema.

Estamos enfrentando el mismo problema que @NielsJanssen en nuestro proyecto, ¿alguna idea de cuándo se solucionará este problema?

También me encuentro con este problema. ¿Alguien encuentra una solución?

Tener el mismo problema aquí. No pude encontrar una solución simple, simplemente terminé reorganizando las importaciones para que no se importen dos veces.

Realmente sugiero que revise Stylus si usa node.js. Usé LESS por un tiempo, me frustré con su completa falta de desarrollo, cambié a SASS y finalmente a Stylus. Realmente clava las características, la sintaxis es opcional (y yo uso un término medio), es muy potente y TJ es un desarrollador realmente receptivo.

Si no usa node.js, aún puede usar Stylus con ruby ​​y compilar en su máquina. Y si no le gusta Stylus por alguna razón, SASS / SCSS también es una buena alternativa y se puede hacer de la misma manera.

En pocas palabras: MENOS no es bueno a largo plazo.

Hombre de muy mala actitud.

No es necesario publicar ese bs aquí. Podrías haberlo enviado por correo o algo similar. No puede tener estándares tan altos como querer un "desarrollador realmente receptivo" para algo que sea de uso gratuito.

Absolutamente no.

Me hubiera encantado ese consejo cuando encontré MENOS por primera vez para no perder semanas de mi tiempo acostumbrándome a él y convirtiéndome en él y de él cuando finalmente me fui. De acuerdo, debería haberlo notado primero, ya que hay más problemas abiertos que cerrados, y la mayoría de ellos no han sido respondidos.

No se trata de qué estándares puedo o no puedo tener. Se trata de advertir a las personas cuando existen mejores alternativas.

Así que mantengo mi "BS" y espero que la gente encuentre útil la advertencia.

@ianstormtaylor : decir que un proyecto "no es bueno a largo plazo" es un poco histérico.

teniendo este mismo problema también.

foo.less

<strong i="7">@import</strong> "bar.less";
<strong i="8">@import</strong> "baz.less";

bar sin

<strong i="12">@import</strong> "mixins.less";
.bar {
  .mixer
}

baz.less

<strong i="16">@import</strong> "mixins.less";
.baz {
  .mixer
}

mixins.less

.mixer {
  color: 000;
  border: 2px solid #fff;
}
$ lessc foo.less
.mixer {
  color: 000;
  border: 2px solid #fff;
}
.bar {
  color: 000;
  border: 2px solid #fff;
  color: 000;
  border: 2px solid #fff;
}
.mixer {
  color: 000;
  border: 2px solid #fff;
}
.baz {
  color: 000;
  border: 2px solid #fff;
  color: 000;
  border: 2px solid #fff;
}

Me mantuve al margen de esta discusión antes, pero ahora que me @wlangstroth no creo que @ianstormtaylor esté histérico en absoluto. simplemente revise la lista de problemas abiertos para este proyecto y cuánto tiempo han estado abiertos algunos de ellos. less es una herramienta útil, pero creo que es una evaluación justa que el soporte es limitado y que se vuelve muy frustrante mientras se espera.

Tengo la impresión de que

_Podría_ tener un archivo main.less que contenga todas sus importaciones. Vea el bootstrap de twitter para ver un ejemplo (el archivo principal es bootstrap.less ).

algunos de los archivos menos que importo (desde una biblioteca externa) están escritos para poder compilarse de forma independiente, por lo que cada uno incluye un variables.less común y el problema que veo ocurre porque importo cada uno de esos menos archivos en un archivo principal y luego, al compilar ese archivo, se aplica cada mezcla tantas veces como se incluyan las mezclas (una por cada archivo que incluyo de la biblioteca externa).

usted correcto - i _could_ hacer algo como usted sugirió y yo _am_ hacer algo así en el código que tengo un control completo sobre, pero que no media todos lo hacen así.

Además, una solución alternativa (_sólo_ si no estaba usando una biblioteca de terceros) no cambia que esto sea un error. Me he familiarizado bastante con cómo solucionar problemas con menos, pero es frustrante que errores como este hayan estado abiertos durante casi 18 meses. ( @wlangstroth me doy cuenta de que no es tu culpa)

para cualquiera que esté interesado, tengo una solución de fuerza bruta (no probada con la prueba de @vicb , pero debería funcionar) que pegué en un comentario en # 431. Voy a intentar encontrar una mejor solución si tengo más tiempo.

teniendo el mismo problema

También tuve este problema, pero lo solucioné importando mis bibliotecas mixin en mi bootstrap.less. No me di cuenta de que las importaciones posteriores tendrían acceso a ellos, pero tiene sentido.

fyi # 431 es una solicitud de extracción que soluciona este problema

@cloudhead ¿Podrías aplicar una solución para esto? Este es probablemente uno de los problemas más antiguos que aún está abierto. Sería bueno verlo resuelto.

El mismo problema :-(

Como sugerencia para cualquiera que tenga problemas con este problema, le recomendaría que le envíe un mensaje a Alexis en Twitter. Alexis ha dicho anteriormente en varios tickets que no puede monitorear todos los problemas y realmente solo los arregla cuando se le informa de la gravedad. Considero que este es un problema grave, pero no he podido llamar la atención de Alexis en Twitter.

Quizás alguien más pueda tener más suerte.

Gorjeo: https://twitter.com/#!/cloudhead

Y coloque un enlace a este problema: https://github.com/cloudhead/less.js/issues/49

@Kalyse si @cloudhead no puede monitorear adecuadamente los problemas de este proyecto, entonces esa es una razón más para que todos eviten usarlo. la gente ha sugerido que debería nombrar a otras personas para que le ayuden a gestionar la acumulación de problemas, pero de nuevo no hubo respuesta.

¿Por qué debería usar Twitter para llamar la atención de alguien cuando ya puede recibir alertas cuando lo menciono en un problema? Creo que es vergonzoso que @cloudhead no pueda responder a los problemas que han estado abiertos durante 2 años; al menos podría encontrar un par de personas en las que confía y hacer que comiencen a trabajar en la acumulación de problemas abiertos. al menos podrían cerrar duplicados y ayudar a reducir el número de problemas abiertos para él.

El sistema de notificación de github es completamente inútil: recibo entre 70 y 100 notificaciones por día, así que prefiero ignorarlas.

Voy a investigar esto ...

Ok, agregué una directiva @import-once , es bastante rudimentaria, ya que solo verifica que las rutas coincidan, pero debería cubrir la mayoría de los casos de uso.

@cloudhead ¡ Me alegro de que hayas

Personalmente, no entiendo por qué este proyecto está incluso en Github si las solicitudes de extracción ni siquiera se consideran o por qué el rastreador de problemas incluso se está ejecutando si los problemas se ignoran.

¡Gente tranquila! Si alguien tuviera un proyecto tan popular, estaría en el mismo barco. @cloudhead ha hecho un gran trabajo y tal vez necesite agregar algunas personas de confianza como administradores. Pero los problemas con las solicitudes de extracción y las pruebas son mucho más útiles que los problemas por sí solos. Tal vez solucione algunos problemas mientras se relaja.

La gente ha solucionado muchos problemas, a veces hace años. Eche un vistazo a una de las 74 solicitudes de extracción pendientes sin respuesta. Como ejemplo, este mismo problema tiene muchos incautos que se remontan a 2 años (como # 324 # 71). Aquí hay una solicitud de extracción que habría solucionado este problema de manera bastante simple: https://github.com/cloudhead/less.js/pull/431 El autor pidió comentarios, se encontró con el silencio y finalmente se rindió.

@cloudhead - Alexis, este es un proyecto demasiado bueno para dejar que se estropee. Cuando las personas ven el tipo de cosas mencionadas anteriormente, les da la impresión de que el proyecto no es digno de confianza o no es confiable. ¡Y es innecesario! La magia de github es que puedes encontrar fácilmente a algunas personas que están escribiendo un gran código y están interesadas en comprometerse con el proyecto. Pregúnteles a esas buenas personas si ayudarán a moderar los problemas y las solicitudes de extracción.

Todos amamos tu trabajo. La comunidad quiere ayudar. ¡Déjanos ayudarte!

@jeremyricketts buen punto.

Estoy de acuerdo con @jeremyricketts : en una empresa para la que trabajo, terminamos sin

@cloudhead parece que la directiva @import-once no funciona, este es mi caso de prueba.

// a.less
.gain-bfc() {
  overflow: hidden;
  *zoom: 1;
}

// b.less
@import-once "a.less";

// c.less
@import-once "a.less";
@import-once "b.less";

div {
  .gain-bfc();
}

después de compilar el c.less , el resultado esperado debería ser

div {
  overflow: hidden;
  *zoom: 1;
}

pero tengo las propiedades duplicadas

div {
  overflow: hidden;
  *zoom: 1;
  overflow: hidden;
  *zoom: 1;
}

+1 jeremyricketts

cualquiera quiere dar un paso al frente - https://twitter.com/#!/neonstalwart/status/183247994072735744

Se necesita alguien con algunas habilidades de programación reales. Mi mundo es PSD, lápiz y papel, HTML CSS y trabajo ligero con jQuery.

Se necesitan un par de personas solo para clasificar los problemas y las solicitudes de extracción,
pode los duplicados, asegúrese de que haya casos de prueba de errores, etc. Me gustaría
para ofrecerme como voluntario para ayudar con eso al menos, y probablemente pueda ayudar
cierre los errores más pequeños también.
El 23 de marzo de 2012 a las 13:28, "Jeremy Ricketts" <
[email protected]>
escribió:

Se necesita alguien con algunas habilidades de programación reales. Mi mundo es PSD,
lápiz y papel, y CSS html y trabajo ligero con jQuery.


Responda a este correo electrónico directamente o véalo en GitHub:
https://github.com/cloudhead/less.js/issues/49#issuecomment -4667283

@cloudhead En caso de que tenga dificultades para pensar en una buena solución para esto, debería echar un vistazo a la resolución de @neonstalwart de hace un tiempo.

Básicamente, las reglas nunca deben agregarse a los selectores si existe una regla con el mismo valor que la propiedad actual. También debe verificar el valor de la propiedad, ya que con los fondos, puede agregar varios fondos diferentes, ya que se manejan de manera diferente en diferentes navegadores.

¿Qué opinas de esta solución? @Cloudhead
¿Parece el camino a seguir?

No arreglar esto significa:

1) Los archivos son más grandes de lo necesario.
2) Difundir su CSS en varios archivos e importar lotes se vuelve indeseable porque por cada vez que incluye un archivo adicional que también incluye los mixins, está agregando los valores de ese mixin nuevamente. Tengo tal vez 80 estilos menos de CSS, y esto significa que cuando hago una mezcla de gradiente .background (), da como resultado 80 * 6 estilos adicionales para cada selector. (6 para admitir todos los diferentes navegadores).
3) También ralentiza la reproducción de la página. Mis dibujos / actualizaciones por segundo caen drásticamente debido a los estilos adicionales.

Pensamientos @cloudhead ?
Salud.

@cloudhead Si hacemos una solicitud de extracción para este problema desde la última confirmación, ¿considerará la fusión?

@Kalyse, ¿puedes enviarme un correo electrónico? [email protected]

Salud

¿Quizás lo que se necesita son algunos desarrolladores confiables adicionales que puedan aprobar solicitudes de extracción?

@cloudhead Uso WinLess para compilar mi código LESS ... WinLess viene con la última distribución de less.js (ver https://github.com/marklagendijk/WinLess/issues/14), así que cualquier idea de cuándo esto (y otras correcciones ) se agregarán a la última versión?

Gracias por un gran producto).

entonces, eh ... ¿Cómo estamos en esto?

@jreading Creo que se ha solucionado en git con el compromiso cb7893

Parece arreglado (o al menos el problema original lo es) y si no, estoy seguro de que hay otro error para cubrir esto.

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

renoth picture renoth  ·  6Comentarios

heavyk picture heavyk  ·  3Comentarios

briandipalma picture briandipalma  ·  6Comentarios

falkenhawk picture falkenhawk  ·  5Comentarios

pknepper picture pknepper  ·  3Comentarios