sass
Петли и кондоны

Пока цикл

Директива @while будет перебирать блок кода до тех пор, пока указанное условие не станет ложным. В следующем примере этот цикл будет выполняться до $font-size <= 18 , увеличивая при этом значение $font-size на 2.

$font-size: 12;

@while $font-size <= 18 {
    .font-size-#{$font-size} {
        font-size: ($font-size * 1px);
    }

    $font-size: $font-size + 2;
}

Вывод кода выше

.font-size-12 {
  font-size: 12px;
}

.font-size-14 {
  font-size: 14px;
}

.font-size-16 {
  font-size: 16px;
}

.font-size-18 {
  font-size: 18px;
}

для цикла

Директива @for позволяет вам @for некоторый код для заданного количества итераций и имеет две формы:

• @for <var> from <start> through <end> {}
• @for <var> from <start> to <end> {}

Разница в двух формах сквозная и к; сквозное ключевое слово будет включать <end> в цикле , где не будет; использование via эквивалентно использованию >= или <= на других языках, таких как C ++, JavaScript или PHP.

Заметки

• Оба <start> и <end> должны быть целыми числами или функциями, возвращающими целые числа.
• Если <start> больше, чем <end> счетчик будет уменьшаться вместо увеличения.

Пример SCSS

@for $i from 1 through 3 {
  .foo-#{$i} { width: 10px * $i; }
}

// CSS output
.foo-1 { width: 10px; }
.foo-2 { width: 20px; }
.foo-3 { width: 30px; }

Условная директива (если)

@if управления @if оценивает данное выражение, и если оно возвращает что-либо иное, кроме false , оно обрабатывает свой блок стилей.

Пример Sass

$test-variable: true !default

=test-mixin
  @if $test-variable
    display: block
  @else
    display: none

.test-selector
  +test-mixin

Пример SCSS

$test-variable: true !default

@mixin test-mixin() {
  @if $test-variable {
    display: block;
  } @else {
    display: none;
  }
}

.test-selector {
  @include test-mixin();
}

В приведенных выше примерах приводится следующий CSS:

.test-selector {
  display: block;
}

Каждый цикл

Директива @each позволяет вам проходить через любой список или карту. Он принимает форму @each $var or <list or map> {} где $var может быть любым именем переменной, а <list or map> может быть всем, что возвращает список или карту.

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

Пример SCSS

$authors: "adam", "steve", "john";
@each $author in $authors {
    .photo-#{$author} {
      background: image-url("avatars/#{$author}.png") no-repeat
    }
}

Выход CSS

.photo-adam {
  background: image-url("avatars/adam.png") no-repeat;
}
.photo-steve {
  background: image-url("avatars/steve.png") no-repeat;
}
.photo-john {
  background: image-url("avatars/john.png") no-repeat;
}

Множественное присвоение

Множественное назначение позволяет получить легкий доступ ко всем переменным путем объявления нескольких переменных в директиве @each .

Вложенные списки

Чтобы иметь легкий доступ ко всем вложенным элементам, вы можете объявить отдельные переменные для соответствия каждому вложенному элементу. Убедитесь, что у вас есть правильное количество переменных и вложенных элементов. В следующем примере каждый цикл выполняет итерацию через список из трех элементов, каждый из которых содержит три элемента вложенных. Наличие неправильного количества объявленных переменных приведет к ошибке компилятора.

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

Карты

Несколько операций присваивания для Карт также, но ограничены только двумя переменными, переменной для доступа к ключу и переменной для доступа к значению. Имена $key и $value являются условными в следующем примере:

@each $key, $value in ('first': 1, 'second': 2, 'third': 3) {
  .order-#{$key} {
    order: $value;
  }
}

Каждый цикл со значениями карт / списков

В приведенном ниже примере значение в map $color-array рассматривается как список пар.

Вход SCSS

$color-array:(
  black: #4e4e4e,                       
  blue: #0099cc,
  green: #2ebc78
);
@each $color-name, $color-value in $color-array {
  .bg-#{$color-name} {
    background: $color-value;
  }
}

Выход CSS

.bg-black {
  background: #4e4e4e;
}

.bg-blue {
  background: #0099cc;
}

.bg-green {
  background: #2ebc78;
}