Less.js: : псевдокласс первого ребенка не работает с расширением

Созданный на 11 февр. 2016 · 7Комментарии · Источник: less/less.js

Я использую следующий код:

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

В файле less у меня следующая структура:

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

В выходном файле CSS для .menu и. меню: после появления. Но НЕ код для. меню: первенец или. меню: последний ребенок.

Если все же изменю. меню: первенец или. меню: последний ребенок в. меню: первое и. меню: в последнюю очередь появится код css.

Похоже, проблема в дефисе.

Есть идеи, как это исправить?

Спасибо.

consider closing needs info

Источник

moshemo

Все 7 Комментарий

Не могу подтвердить ваш результат: демо .
Из вашего вопроса в SO я вижу, что вы используете gulp-less , но поскольку я не могу вспомнить какую-либо версию Less (начиная с 1.4.x), в которой есть такая ошибка, скорее всего, это не своего рода проблема "не последней версии с меньшим количеством глотков или без глотка". Итак, вопрос: уверены ли вы, что это _ тот фрагмент, с которым у вас возникла проблема (может быть, это что-то более сложное?), И / или это может быть какая-то другая задача gulp которая может помешать?

seven-phases-max 11 февр. 2016

Возможно, это глоток-задача. Я займусь этим завтра или в начале следующей недели. Спасибо.

moshemo 11 февр. 2016

Может это поможет.

ivan-nikitovic 13 мар. 2016

😕3

Закрытие из-за бездействия (в любом случае, похоже, это не проблема Less).

seven-phases-max 17 апр. 2016

@ seven-phase-max Я считаю, что приведенный выше код в точности воспроизводит эту проблему.

меньше

.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

.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:

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

отсутствующая часть

.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 17 апр. 2016

@ ivan-nikitovic Нет, посмотрите разницу между extend и extend all .

seven-phases-max 17 апр. 2016

@ seven-phase-max это имеет смысл. :-) Спасибо за ссылку.

ivan-nikitovic 17 апр. 2016

Была ли эта страница полезной?

0 / 5 - 0 рейтинги