Less.js: :extendで動作しない最初の子の疑似クラス

作成日 2016年02月11日  ·  7コメント  ·  ソース: less/less.js

私は次のコードを使用しています:

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

少ないファイルでは、次の構造になっています。

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

出力ファイルで、.menuおよび。のcss。 メニュー:表示menu:first-childまたは。 menu:last-child。

ただし、変更した場合。 menu:first-childまたは。 menu:last-childtomenu:firstと。 menu:lastすると、cssコードが表示されます。

ハイフンが問題のようです。

これを修正する方法はありますか?

ありがとう。

consider closing needs info

全てのコメント7件

結果を確認できません:デモ
SOでの質問から、 gulp-lessを使用していることがわかりますが、このようなバグがあるLessバージョン(1.4.x以降)を実際に思い出せないため、おそらく一種の「最近ではない、または一口のないバージョン」の問題。 したがって、問題は次のとおりです。これは、問題が発生しているスニペットであるか(おそらく、より複雑なものである可能性がありますか)、および/または干渉する可能性のある他のgulpタスクである可能性がありますか?

おそらくそれは一口タスクです。 明日か来週初めに調べます。 ありがとう。

多分これは助けることができます。

非アクティブのために閉じる(とにかくLessの問題ではないようです)。

@ Seven-phases-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いいえ、 extendextend allの違いを確認してください。

@ seven-phases-maxこれには意味があります。 :-)参照していただきありがとうございます。

このページは役に立ちましたか?
0 / 5 - 0 評価