css - 如何将mixin参数传递给Less中的第n个类型？

Question

我通过@var像这样传递给我的混合来设置列数：

.author-card(@numberOfCards) {
    width: 100% / @numberOfCards - 2%;
    padding-bottom: 165% / @numberOfCards - 2%;
}

除了最后一行之外，我希望margin-right: 2%每一列都有一个。因此，我尝试执行以下操作：

.author-card(@numberOfCards) {
    width: 100% / @numberOfCards - 2%;
    padding-bottom: 165% / @numberOfCards - 2%;
    margin-right: 2%;
    &:nth-of-type(n * @numberOfCards) {
        margin-right: 0;
    }
}

此时，Less 编译器无法编译它。

我可以用更少的方式实现这一点吗？也许还有其他方法可以做到这一点？

我收到以下错误：

ParseError：myStylesheet.less 中无法识别的输入

Answer 1

要执行选择器插值，您需要将变量放在大括号内，如下所示：

.author-card(@numberOfCards) {
    width: 100% / @numberOfCards - 2%;
    padding-bottom: 165% / @numberOfCards - 2%;
    margin-right: 2%;
    &:nth-of-type(@{numberOfCards}) { // note the change.
        margin-right: 0;
    }
}

选择器插值 - 语法参考