CODEWITHSUNDEEP
cssloopsless
Edward Ploy
Edward Ploy

Reputation: 395

Parsing error while creating loop with LESS

I'm creating clock with CSS (LESS). I'm adding loop to align digits in circle with LESS loops. But it's showing a parsing error.

.clock-digits{
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 2px;
    height: @clock-digits/2;
    transform-origin: bottom center;
    &:after{
        content: attr(data-digit);
        position: absolute;
        top: 5px;
        left: 50%;
        display: block;
        border-radius: 50%;
        border: 1px solid red;
        width: 30px;
        height: 30px;
        margin-left:(-30px/2);
        font-size: 2em;
        line-height: 30px;
        text-align: center;
    }
    .mixin-loop (@i) when (@i > 0){
        &:nth-child(@{i}){
            transform: rotate((@{i} * 360 / @clock-digits)deg);
            &:after{
                transform: rotate(-(@{i} * 360 / @clock-digits)deg);
            }
        }
        .mixin-loop(@i - 1);
    }

    .mixin-loop(@clock-digits);
}

Upvotes: 0

Views: 125

Answers (1)

Harry
Harry

Reputation: 89770

The problem is with @{i} in the mathematical operation within the mixin. @{var} format is needed only when doing interpolation (variable/selector/property). For this case, just @i would suffice.

.mixin-loop (@i) when (@i > 0){
    &:nth-child(@{i}){
        transform: rotate(unit((@i * 360 / @clock-digits),deg));
        &:after{
            transform: rotate(unit(-(@i * 360 / @clock-digits),deg));
        }
    }
    .mixin-loop(@i - 1);
}

Additional Note: Also, it is better to use the built-in unit() function with deg as the second parameter to convert a number to degrees than using string concatenation.

Upvotes: 2

Related Questions