====Директива @for====

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

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

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

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

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

компилируется в
<sxh css>
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }
</sxh>
----
====Компилируем сетку====

<sxh scss>
@for $i from 1 through 12{
  .col-xs-#{$i}{
    width: $i * 2px;
  }
}

</sxh>

компилируется в
<sxh css>
.col-xs-1 {
  width: 2px; }

.col-xs-2 {
  width: 4px; }

.col-xs-3 {
  width: 6px; }

.col-xs-4 {
  width: 8px; }

.col-xs-5 {
  width: 10px; }

.col-xs-6 {
  width: 12px; }

.col-xs-7 {
  width: 14px; }

.col-xs-8 {
  width: 16px; }

.col-xs-9 {
  width: 18px; }

.col-xs-10 {
  width: 20px; }

.col-xs-11 {
  width: 22px; }

.col-xs-12 {
  width: 24px; }

</sxh>