Parsing error while creating loop with LESS

Question

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

What is the parsing error?

TylerH
– TylerH

2021-11-05 15:55:15 +00:00
Commented Nov 5, 2021 at 15:55 — TylerH
– TylerH, Commented Nov 5, 2021 at 15:55

Harry · Accepted Answer · 2014-12-21 15:50:30Z

2

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.

edited Dec 21, 2014 at 15:50

answered Dec 21, 2014 at 15:42

Harry

90.1k26 gold badges216 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Parsing error while creating loop with LESS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related