Actualmente estoy traduciendo mi cuadrícula a MENOS, pero parece que no puedo entender la interpolación de cadenas.

Aquí hay una clase de ayuda que se supone que genera todas mis columnas:

.createColumns (@colNumber+1) {}

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

    .createColumns (@index + 1);
}

.createColumns (01);

El problema es que me sale un error que dice que hay algún problema con esta parte.(~".col@{index}").

Aquí está el mensaje de error:

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

He comprobado varios ejemplos y todos usan la misma sintaxis, así que no estoy seguro de qué me estoy perdiendo. Este fue también uno de mis intentos que resultó en un error:

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