Less.js: : pseudo classe do primeiro filho não funciona com extend

Criado em 11 fev. 2016 · 7Comentários · Fonte: less/less.js

Estou usando o seguinte código:

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

No arquivo less eu tenho a seguinte estrutura:

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

No arquivo de saída, o css para .menu e. menu: depois de aparecer. Mas NÃO o código para. menu: primeiro filho ou. menu: último filho.

Se, no entanto, eu mudar. menu: primeiro filho ou. menu: último filho a. menu: primeiro e. menu: por último , o código css aparecerá.

Parece que o hífen é o problema.

Alguma ideia de como consertar isso?

Obrigado.

consider closing needs info

Fonte

moshemo

Todos 7 comentários

Não posso confirmar o seu resultado: demo .
Pela sua pergunta no SO, posso ver que você está usando gulp-less , mas como não consigo me lembrar de nenhuma versão do Less (a partir de 1.4.x) que tenha um bug como este, provavelmente não é um tipo de problema "versão não recente menos ou gulp-less". Portanto, a pergunta é: você tem certeza de que _é_ o snippet com o qual está tendo o problema (talvez seja algo mais complexo?) E / ou pode ser alguma outra tarefa gulp que possivelmente interfira?

seven-phases-max em 11 fev. 2016

Talvez seja uma tarefa de engolir. Vou cuidar disso amanhã ou no início da semana que vem. Obrigado.

moshemo em 11 fev. 2016

Talvez isso possa ajudar.

ivan-nikitovic em 13 mar. 2016

😕3

Fechando devido à inatividade (parece não ser um problema Menos de qualquer maneira).

seven-phases-max em 17 abr. 2016

@ seven-phase-max Eu acredito que o código , fornecido acima, reproduz exatamente esse 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 gerado

.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;
}

peça faltando

.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 em 17 abr. 2016

@ ivan-nikitovic Não, veja a diferença entre extend e extend all .

seven-phases-max em 17 abr. 2016

@ sete-fases-máximo isso faz sentido. :-) Obrigado pela referência.

ivan-nikitovic em 17 abr. 2016

Esta página foi útil?

0 / 5 - 0 avaliações