Директива @for

Директива @for выводит набор стилей заданное число раз. Для каждого повторения используется переменная-счётчик для изменения вывода.

Директива имеет две формы: @for $var from <начало> through <конец> и @for $var from <начало> to <конец>. Заметьте различие в словах through и to.

$var может быть любым именем переменной, таким как $i; <начало> и <конец> - выражения SassScript, которые должны возвращать целые числа. Если <начало> больше, чем <конец>, счётчик будет убывать, вместо того, чтобы расти.

Выражение @for устанавливает переменную $var в каждое последующее значение в заданном диапазоне и каждый раз выводит вложенные стили, используя очередное значение переменной $var. Форма from ... through, диапазон включает значения <начало> и <конец>, а форма from ... to не включает значение <конец>.

@for $i from 1 through 3 {
  .item-#{$i} { 
    width: 2em * $i; 
  }
}

@for $i from 1 through 3
  .item-#{$i} 
    width: 2em * $i

.item-1 {
  width: 2em; 
}

.item-2 {
  width: 4em; 
}

.item-3 {
  width: 6em; 
}