Question

我用CSS（LESS）创建时钟。我添加循环以将数字与LESS循环对齐。但是它显示了解析错误。

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

有人可以帮我吗？试了很多东西要解决，但想不通。

Answer 1

问题在于mixin中的数学运算中的@{i}。仅在进行插值（变量/选择器/属性）时才需要@{var}格式。对于这种情况，只需@i即可。

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

附加说明另外，最好使用内置unit()函数和deg作为第二个参数将数字转换为度数而不是使用字符串连接

使用LESS创建循环时解析错误

1 个答案: