时间戳

首页 > 解决方案 > 编译时少循环丢失“）”

css - 编译时少循环丢失“）”

问题描述

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

这是我的问题。我用 Less 构建了一个 mixin 循环来构建一堆 css，但由于某种原因，它似乎缺少closing brace ")"第 4 行（下面粘贴的代码）。

我尝试了什么：

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

.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
似乎编译器在第@i4 行到达第一个时停止。
由于某种原因，当我删除第一个变量时，错误移至第 8 行。
这表明由于某种原因，该变量@i不允许在:nth-of-type().
有人知道这里发生了什么吗？

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

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

标签： cssloopscompilationless

解决方案

所以看来我发现了这个问题。

似乎问题在于在:nth-of-type().

当我从第 n 个类型中删除变量时，我注意到错误移动到了一个新行，其中还包括第 n 个类型。
当我去查找变量的使用时，我找不到任何东西，后来我在堆栈溢出中遇到了一个帖子

马丁·图尔贾克的回答

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

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

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

推荐阅读