私は次のコードを使用しています:
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-childto 。 menu:firstと。 menu:lastすると、cssコードが表示されます。
ハイフンが問題のようです。
これを修正する方法はありますか?
ありがとう。
結果を確認できません:デモ。
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いいえ、 extend
とextend all
の違いを確認してください。
@ seven-phases-maxこれには意味があります。 :-)参照していただきありがとうございます。