将 SASS 数学表达式转换为 LESS答案

【问题标题】：Convert SASS math expression to LESS将 SASS 数学表达式转换为 LESS
【发布时间】：2017-05-01 08:43:40
【问题描述】：

我有在其中生成 CSS 类的 SASS 代码，并且运行良好。它有 for 循环和简单的数学表达式。

我想将其转换为 LESS，但我自己无法完成。请看下面的代码。

如何像 SASS 那样将其转换为 LESS 代码？

@for $i from 1 through (($point-count + 1) / 2) {
    &:nth-of-type(#{$i}) {
        transform: rotate(360deg / $point-count * ($i - 1));
    }

    &:nth-of-type(#{$i + $point-count / 2}) {
        transform: rotate(180deg + 360deg / $point-count * ($i - 1));
    }

    &:nth-of-type(#{$i}), &:nth-of-type(#{$i + $point-count / 2}) {
        &:before {
            animation-delay: - $spin-animation-time + ($spin-animation-time / $point-count * 2 * ($i - 1));
        }
    }
}

【问题讨论】：

你能用 LESS 编写一个简单的loop 吗？管理变量的插值（在循环之外开始）？

标签： css for-loop express sass less

【解决方案1】：

.loop(@i) when (@i < (@point-count + 1) / 2) {
    .loop((@i + 1));

    &:nth-of-type(@{i}) {
        transform: rotate(360deg / @point-count * (@i - 1));
    }

    @index: @i + @point-count / 2;

    &:nth-of-type(@{index}) {
        transform: rotate(180deg + 360deg / @point-count * (@i - 1));
    }

    &:nth-of-type(@{i}),
    &:nth-of-type(@{index}) {
        &:before {
            animation-delay: - @spin-animation-time + (@spin-animation-time / @point-count * 2 * (@i - 1));
        }
    }
}

.loop(1)

【讨论】：