Циклы в Sass

Циклы позволяют последовательно изменять значение переменной в заданных пределах и подставлять полученное значение в имена классов, значения свойств, а также использовать в вычислениях. Для создания цикла в Sass предназначена команда @for.

Для примера возьмём цикл от 1 до 3, он будет записываться в следующем виде.

@for $i from 1 through 3 {
 // тело цикла
}

Здесь $i это переменная-счётчик, в которой хранится номер итерации, 1 — начальное значение, 3 — конечное. Не обязательно использовать именно эти цифры. Числа могут быть и отрицательными, а цикл начинаться и с большего числа, тогда значение счётчика будет последовательно уменьшаться, а не увеличиваться, как обычно.
Теперь у нас есть переменная $i, которую мы можем подставлять внутри цикла куда нам требуется. В вычислениях переменная так и пишется, а вот в именах классов или в значениях свойств мы уже должны писать как #{$i}.

Циклы удобно применять для CSS-спрайтов, в которых используется одна фоновая картинка содержащая несколько изображений. Ограничиваем размеры элемента, чтобы часть фона была скрыта, а затем просто сдвигаем фон, показывая нужную часть.

Пример спрайта

Для этой картинки введём три класса, каждый из них соответствует фрагменту изображения. Отличаться стиль для каждого спрайта будет именем класса и значением background-image. Вот как запишется Sass.

%craft {
  background: url(images/craft.png) no-repeat;
  width: 27px; height: 31px;
  display: inline-block;
  margin-right: 10px;
}
@for $i from 0 through 2 {
  .craft#{$i} {
    @extend %craft;
    $length: -31px*$i;  
    background-position: 0 $length;
  }
}

Первый спрайт имеет нулевые координаты у значения background-image, поэтому цикл мы начинаем с нуля, чтобы не делать дополнительные вычисления. Высота каждого спрайта одинакова и равна 31 пиксель, так что получить нужную нам координату легко — достаточно умножить переменную $i на 31. Обязательно надо добавить к значениям px, иначе стили не будут поняты корректно.

В результате мы получим следующий стиль.

.craft0, .craft1, .craft2 {
  background: url(images/craft.png) no-repeat;
  width: 27px;
  height: 31px;
  display: inline-block;
  margin-right: 10px;
}
.craft0 {
  background-position: 0 0px;
}
.craft1 {
  background-position: 0 -31px;
}
.craft2 {
  background-position: 0 -62px;
}