css - n番目の子のミックスインが少ないですか?

Question

この出力が得られるLESS mixinを作成しようとしています:

.resource:nth-child(8n+1) { clear: left; }

私はこれまでのところこれを持っています：

.wrap-every(@n) {
    &:nth-child(@n + "n+1") {  // parse error on this line
        clear: left;
    }
}

.resource {
    .wrap-every(8);
}

しかし、指定された行で解析エラーが発生しています

ParseError: 認識できない入力

これを行う方法はありますか？

score 26 · Accepted Answer

未満 >= 1.4

次のようなことができます。

.wrap-every(@n) {
  &:nth-child(@{n}n + 1) {
        clear: left;
    }
}

これにより、目的の出力が得られるはずです。ハックは必要ありません。

簡単な文字列補間を試すことができます：

.wrap-every(@n) {
    @t: ~":nth-child(@{n}n + 1)";
    &@{t} {
        clear: left;
    }
}

どちらの場合も、出力CSSは次のようになります。

.resource:nth-child(8n + 1) {
  clear: left;
}