Циклы позволяют последовательно изменять значение переменной в заданных пределах и подставлять полученное значение в имена классов, значения свойств, а также использовать в вычислениях. Для создания цикла в 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;
}