css - 编译时 Less 循环丢失 ")"

Question

我一直在研究一种纯粹用 html 和 css 构建轮播的方法。没有Javascript。到目前为止，我一直很喜欢我在网上找到的内容并看过一些教程。

不过这是我的问题。我用 Less 构建了一个 mixin 循环来构建一堆 css，但由于某种原因，它似乎在第 4 行(下面粘贴的代码)中缺少一个 右大括号 ")"。

我尝试过的:

• 完全删除 Less 代码块 -> 错误消失。
• 删除了 .carousel-reviews 中的所有代码 -> 错误仍然存​​在
• 删除了子选择器周围的 .carousel-reviews -> 错误仍然存​​在
• 将变量名从 @i 更改为 @index -> 错误仍然存​​在
• 从 &__activator:nth-of-type( @i ) 选择器中删除了所有代码 -> 错误仍然存​​在

希望有人能看到我在这里做错了什么。

.loop( @i ) when ( @i > 0 ) {

.carousel-reviews {
    &__activator:nth-of-type( @i ) {
        &:checked ~ .carousel_track {
            transform: translateX(calc(@i - 1) * 100%);
        }
        &:checked ~ .carousel__slide:nth-of-type(@i) {
            transition: opacity @slideTransition, transform @slideTransition;
            top: 0;
            left: 0;
            right: 0;
            opacity: 1;
            transform: scale(1);
        }
        &:checked ~ .carousel__controls:nth-of-type(@i) {
            display: block;
            opacity: 1;
        }
        &:checked ~ .carousel__indicators .carousel__indicator:nth-of-type(@i) {
            opacity: 1;
        }
    }
  }
.loop ( ( @i - 1 ) );
}

如果我不够完整，请告诉我，我可以将信息添加到问题中。

编辑 1
编译器似乎在到达第 4 行的第一个 @i 时停止了。
出于某种原因，当我删除第一个变量时，错误移至第 8 行。
这表明由于某种原因，:nth-of-type() 中不允许使用变量 @i。
有人知道这里发生了什么吗？

当我找到新的答案或问题时，我会继续搜索和更新

编辑 2
找到了解决方案。检查答案

Answer 1

看来我发现了问题。

关于 :nth-of-type() 中变量的使用，问题似乎出在 less 本身。

当我从第 nth-of-type 中删除变量时，我注意到错误移到了一个新行，该行也包含第 nth-of-type。
当我去查找 less 中变量的使用时，我找不到任何东西，后来我在堆栈溢出中看到了一个帖子

THIS ANSWER BY MARTIN TURJAK

我建议去看看。但简而言之，变量使用似乎存在问题，您必须像在这样的字符串中使用它一样使用它 :nth-of-type(@{i}) .

希望这可以帮助其他为同样的问题而苦苦挣扎的人。
我目前没有时间找出为什么会发生这种情况，我也没有任何线索，但如果有人可以解释这一点，那就太棒了。

无论如何，感谢您的宝贵时间，祝您有美好的一天!