少给nth-child混搭吗? [英] LESS mix-in for nth-child?

问题描述

我正在尝试制作一个LESS mixin，它将为我提供以下输出:

I'm trying to make a LESS mixin that will give me this output:

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

到目前为止，我已经知道了:

I've got this so far:

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

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

但是它在指示的行上给出了解析错误

But it's giving a parse error on the indicated line

ParseError:无法识别的输入

有没有办法做到这一点?

Is there a way to do this?

推荐答案

较少> = 1.4

您可以执行以下操作:

Less >= 1.4

you could do something like this:

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

这应该具有所需的输出.无需任何黑客.

this should have the desired output. Without any hacks needed.

您可以尝试简单的字符串插值:

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

在两种情况下，

和输出 CSS 应该是这样的:

and the output CSS in both cases should be something like this:

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

这篇关于少给nth-child混搭吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！