css - LESS class name string interpolation not working

Question

I am currently translating my grid into LESS, but I can't seem to figure out string interpolation.

Here's helper class that is supposed to generate all my columns:

.createColumns (@colNumber+1) {}

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

    .createColumns (@index + 1);
}

.createColumns (01);

Problem is, I get error that says something is wrong with this part (~".col@{index}").

Here's the error message:

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

I have checked several examples and all use same syntax, so I'm not sure what I'm missing. This was also one of my tries that resulted in an error:

.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;
}

反而。