循环变量的 SCSS 不起作用

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