# Sass @for

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.

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