Operations inside a LESS loop?

Question

css

Good night all! Faced a problem. Organized a cycle in which for col blocks, depending on their suffixes, the width in percent will be calculated.

@gridColNumber: 12;

.grid-loop(@i) when (@i > 0) {
    [email protected]{i} {
        width: ~"((100 * @{i}) / 12)%";
    }

    .grid-loop(@i - 1);
}

.grid-loop(@gridColNumber);

respectively, the expression: width: ~"((100 * @{i}) / 12)%";does not give anything, if you write simply width: ~"@{i}%";, then it will calculate this simple expression. And when writing:

<section class="row-fluid">
            <div class="col-4"></div>
            <div class="col-4"></div>
            <div class="col-4"></div>
          </section>

col-4 blocks will be given a width of 4%, but should be according to the formula;
((100 * @{i}) / 12)%, and this is 33.33333%
Help me understand the syntax of the expression in the loop, where the width is assigned a value by the formula. Thanks in advance.

Answer 1

width: (100 * @i) / 12%;
In your case, you were just collecting a string.