css - SCSS for循环变量不起作用

Question

我正在尝试使用 SCSS 和循环更改 nth-of-type 元素的不透明度。我已经测试了手动设置 .slick-slide:nth-of-type(2) 并且当我从 @for 循环中尝试它时它确实有效它不会花费变量 $i。我在这里做错了什么，似乎一切都应该是正确的。

@for $i from 1 through 4 {
    .slick-slide:nth-of-type($i) {
        opacity: 100 / $i;
    }
}

Answer 1

当您在 SCSS 的选择器中使用变量时，您需要使用 interpolation syntax并像这样包装它 #{$myVariable}。您的示例将是:

@for $i from 1 through 4 {
    .slick-slide:nth-of-type(#{$i}) {
        opacity: 100 / $i;
    }
}