Циклы в 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;
}

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 19.10.2016
Редакторы: Влад Мержевич