CSS 第n个孩子的混合少？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18118272/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
LESS mix-in for nth-child?
提问by recursive
I'm trying to make a LESS mixin that will give me this output:
我正在尝试制作一个 LESS mixin，它会给我这个输出：
.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: Unrecognised input
ParseError：无法识别的输入
Is there a way to do this?
有没有办法做到这一点？
回答by Martin Turjak
Less >= 1.4
小于 >= 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.
这应该有所需的输出。无需任何黑客。
in older versins of Less
在 Less 的旧版本中
you can try simple string interpolation:
您可以尝试简单的字符串插值：
.wrap-every(@n) {
@t: ~":nth-child(@{n}n + 1)";
&@{t} {
clear: left;
}
}
and the output CSSin both cases should be something like this:
两种情况下的输出CSS应该是这样的：
.resource:nth-child(8n + 1) {
clear: left;
}
