Sass @for

Watch "Looping through lists with @for" on LinkedIn Learning

The @for rule is used to count up or down from a range of numbers. For each iteration, the value of the iterator is set to current number and the block is evaluated. The range of numbers can be connected using to, which will exclude the final number, or through, which will include the final number.

When using the iterator, or any variable, as part of a selector, property, or value, interpolation should be used. This is accomplished by using the #{} syntax.

NOTE

Interpolation should NOT be use when working with arithmetic.

// loops 10 times
@for $i from 1 through 10 {
  .box:nth-child(#{$i}) {
    background-color: lighten(#000, ($i - 1) * 10%);
  }
}

Try it yourself on Sassmeister