LESS类名字符串插值不起作用

Question

我目前正在将网格转换为LESS，但我似乎无法弄清楚字符串插值。

这是应该生成我所有列的辅助类：

.createColumns (@colNumber+1) {}

.createColumns (@index) when (@index < @colNumber) {
    (~".col@{index}") {
         width: @baseWidth * @index;
    }

    .createColumns (@index + 1);
}

.createColumns (01);

问题是，我收到错误，指出此部分(~".col@{index}")出现问题。

以下是错误消息：

ParseError: Unrecognised input
in grid.css on line 17, column 4:
16    .createColumns (@index) when (@index < @colNumber) {
17        (~".col@{index}") {
18            width: @baseWidth * @index;

我查了几个例子，并且都使用相同的语法，所以我不确定我缺少什么。 这也是我的一次尝试导致错误：

.createColumns (@index) when (@index < @colNumber) {
    @class : "col"@index;
    .(@class) {
        width: @baseWidth * @index;
    }
.createColumns (@index + 1);
}

Answer 1

1.4.x中不推荐使用转义选择器插值，使用

.col@{index} {
     width: @baseWidth * @index;
}

代替。