Less.js: : la pseudoclase del primer hijo no funciona con extender

Creado en 11 feb. 2016 · 7Comentarios · Fuente: less/less.js

Estoy usando el siguiente código:

header {
    &:extend(.menu all);
}

En el archivo menos tengo la siguiente estructura:

.menu {// CODE}
.menu:after {// CODE}
.menu:first-child {// CODE}
.menu:last-child {// CODE}

En el archivo de salida, el CSS para .menu y. menú: después de aparecer. Pero NO el código de. menú: primer hijo o. menú: último hijo.

Sin embargo, si cambio. menú: primer hijo o. menú: último hijo hasta. menú: primero y. menú: por último , aparecerá el código css.

Parece que el guión es el problema.

¿Algúna idea de cómo arreglar esto?

Gracias.

consider closing needs info

Fuente

moshemo

Todos 7 comentarios

No puedo confirmar tu resultado: demo .
De su pregunta en SO, puedo ver que está usando gulp-less , pero como realmente no puedo recordar ninguna versión Less (a partir de 1.4.x) que tenga un error como este, lo más probable es que no sea un una especie de problema de "versión menos o menos reciente". Entonces, la pregunta es: ¿está seguro de que este _es_ el fragmento con el que está experimentando el problema (¿tal vez sea algo más complejo?), Y / o podría ser alguna otra tarea gulp que posiblemente interfiera?

seven-phases-max en 11 feb. 2016

Quizás sea una tarea de tragar. Lo investigaré mañana o principios de la semana que viene. Gracias.

moshemo en 11 feb. 2016

Quizás esto pueda ayudar.

ivan-nikitovic en 13 mar. 2016

😕3

Cierre debido a inactividad (parece no ser un problema de Menos de todos modos).

seven-phases-max en 17 abr. 2016

@ seven-phase-max Creo que el código , proporcionado arriba, reproduce exactamente este problema.

menos

.col {
  float: left;

  &:last-child {
    margin-right: 0;
  }
  &:first-child {
    margin-left: 0;
  }
}

.generate-columns(<strong i="9">@n</strong>, <strong i="10">@i</strong>: 1) when (<strong i="11">@i</strong> =< @n) {
  .col-@{i}:extend(.col) {
    margin-left: (@i)px;
  }

  .generate-columns(<strong i="12">@n</strong>, (<strong i="13">@i</strong> + 1));
}

.generate-columns(2);

CSS generado

.col,
.col-1,
.col-2 {
  float: left;
}
.col:last-child {
  margin-right: 0;
}
.col:first-child {
  margin-left: 0;
}
.col-1 {
  margin-left: 1 px;
}
.col-2 {
  margin-left: 2 px;
}

css esperado:

.col,
.col-1,
.col-2 {
  float: left;
}
.col:last-child {
  margin-right: 0;
}
.col:first-child {
  margin-left: 0;
}
.col-1 {
  margin-left: 1 px;
}
.col-1:last-child {
  margin-right: 0;
}
.col-1:first-child {
  margin-left: 0;
}
.col-2 {
  margin-left: 2 px;
}
.col-2:last-child {
  margin-right: 0;
}
.col-2:first-child {
  margin-left: 0;
}

parte que falta

.col-1:last-child {
  margin-right: 0;
}
.col-1:first-child {
  margin-left: 0;
}
.col-2:last-child {
  margin-right: 0;
}
.col-2:first-child {
  margin-left: 0;
}

ivan-nikitovic en 17 abr. 2016

@ ivan-nikitovic No, mira la diferencia entre extend y extend all .

seven-phases-max en 17 abr. 2016

@ seven-phase-max esto tiene sentido. :-) Gracias por la referencia.

ivan-nikitovic en 17 abr. 2016

¿Fue útil esta página

0 / 5 - 0 calificaciones