SCSS for loop variable not working

Question

I'm trying to change the opacity of the nth-of-type elements with SCSS and a loop. I have tested manually setting .slick-slide:nth-of-type(2) and it does work just when I try it from the @for loop it will not take the variable $i. What am I doing wrong here, it seems that everything should be correct.

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

Answer 1

When you're using a variable in a selector in SCSS you need to use the interpolation syntax and wrap it like this #{$myVariable}. Your example would then be:

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