LESS Интерполяция строки имени класса не работает

В настоящее время я перевожу свою сетку на 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);
}