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