Interpolação de string de nome de classe LESS não está funcionando

No momento, estou traduzindo minha grade para LESS, mas não consigo descobrir a interpolação de string.

Aqui está a classe auxiliar que deve gerar todas as minhas colunas:

.createColumns (@colNumber+1) {}

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

    .createColumns (@index + 1);
}

.createColumns (01);

O problema é que eu recebo um erro que diz que algo está errado com essa parte(~".col@{index}").

Aqui está a mensagem de erro:

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

Eu verifiquei vários exemplos e todos usam a mesma sintaxe, então não tenho certeza do que estou perdendo. Essa também foi uma das minhas tentativas que resultaram em um erro:

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

questionAnswers(1)

yourAnswerToTheQuestion