Эта статья является второй частью: Sass циклы — for. Статья первая

Продолжим знакомство с продвинутыми возможностями Sass на примере циклов each и while.

Цикл each - часть 1

Директива @each имеет следующую форму записи: @each $var in <СПИСОК>.

Объявление переменной происходит через ключевое слово $var и может быть любым допустимым в Sass именем, например $length или $name. Значение <СПИСОК> - это Sass выражение, которое должно возвращать список или таблицу данных.

@each директива последовательно назначает переменной $var значение каждого элемента списка, затем выводит содержимое этой переменной.

Пример:

/* Each Loop - часть 1 */

$colors: LightGreen, Magenta, Tomato, Tan, GoldenRod, OliveDrab, LightSeaGreen, DeepSkyBlue, Linen;

@each $color in $colors {
  .#{$color}-bg {
    background : $color;
  }
}

Сначала мы определил список цветов в переменной $colors. Затем в цикле each выводим последовательно название блока, которые имеет такое же имя, как и цвет. И присваиваем значение цвета background, которое содержится в переменной $color.

.LightGreen-bg {
  background: LightGreen; }

.Magenta-bg {
  background: Magenta; }

.Tomato-bg {
  background: Tomato; }

.Tan-bg {
  background: Tan; }

.GoldenRod-bg {
  background: GoldenRod; }

.OliveDrab-bg {
  background: OliveDrab; }

.LightSeaGreen-bg {
  background: LightSeaGreen; }

.DeepSkyBlue-bg {
  background: DeepSkyBlue; }

.Linen-bg {
  background: Linen; }

Демо доступно по ссылке:
http://codepen.io/sbogdanov108/pen/yeoqvx?editors=110

Цикл each - часть 2

Директива @each также может работать с набором переменных, например @each $var1, $var2, ... in <СПИСОК>. Если <СПИСОК> содержит в себе набор под-списков, тогда каждый элемент под-списка присваивается соответствующей переменной.

Пример:

/* Each Loop - часть 2 */

@each $animal, $color-border, $cursor in
        (puma, LightGreen, default),
        (sea-slug, Tan, pointer),
        (egret, DeepSkyBlue, move)
{
  .wrapper .#{$animal}-block {
    background-image : url('../images/#{$animal}-cr.jpg');
    border           : 5px solid $color-border;
    cursor           : $cursor;
  }
}

Таким образом, значение переменной $animal равно «puma», переменная $color-border будет содержать значение «LightGreen», а в переменной $cursor будет значение «default». Соответственно этому порядку, произойдет обработка каждого элемента списка.

.wrapper .puma-block {
  background-image: url("../images/puma-cr.jpg");
  border: 5px solid LightGreen;
  cursor: default; }

.wrapper .sea-slug-block {
  background-image: url("../images/sea-slug-cr.jpg");
  border: 5px solid Tan;
  cursor: pointer; }

.wrapper .egret-block {
  background-image: url("../images/egret-cr.jpg");
  border: 5px solid DeepSkyBlue;
  cursor: move; }

Демо доступно по ссылке:
http://codepen.io/sbogdanov108/pen/WrEKzz?editors=110

Цикл each - часть 3

Также, директива @each работает со структурой, похожей на ассоциативный массив, называемой map.

Пример:

/* Each Loop - часть 3 */

@each $header, $size in
        (h1: 24px, h2: 20px, h3: 18px)
{
  #{$header} {
    font-size : $size;
  }
}

В данном случае происходит парное присвоение переменным $header и $size значений «h1» и «24px» соответственно. Затем происходить обработка следующих двух значений, разделенных запятой.

h1 {
  font-size: 24px; }

h2 {
  font-size: 20px; }

h3 {
  font-size: 18px; }

Демо доступно по ссылке:
http://codepen.io/sbogdanov108/pen/obeMdj?editors=110

Цикл while

Директива @while повторно выводит значения вложенных в нее стилей до тех пор, пока не получит значение условия равное false.

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

Пример:

$i: 100;
@while $i > 0 {

  .item-#{$i} {
    background: adjust-hue(#00BFFF, $i);
    height: #{$i}px;
    width : $i * 2px;
  }

  $i: $i - 25;
}

В данном случае, цикл while прекращает свою работу при достижении значения условия цикла равного false. До тех пор, пока это не случилось, происходит выполнение тела цикла.

.item-100 {
  background: #ea00ff;
  height: 100px;
  width: 200px; }

.item-75 {
  background: #8000ff;
  height: 75px;
  width: 150px; }

.item-50 {
  background: #1600ff;
  height: 50px;
  width: 100px; }

.item-25 {
  background: #0055ff;
  height: 25px;
  width: 50px; }

Демо доступно по ссылке:
http://codepen.io/sbogdanov108/pen/bErjMa?editors=110

На этом знакомство с Sass циклами завершено.

Исходные коды доступны по ссылке:
https://github.com/sbogdanov108/ex-sass-loops