Написание цикла, который увеличивается на значение, отличное от 1 в Sass

Ответ 1

Это не в документации, потому что она просто не реализована. То, что вы хотите сделать, может быть выполнено с помощью директивы @while.

$i: 1;
@while $i < 100 {
  // do stuff
  $i: $i + 2;
}

Ответ 2

Sass не предоставляет способ указать, сколько нужно увеличивать с помощью @for циклов. Вместо этого вы пишете свой цикл, чтобы отобразить, сколько шагов вам нужно предпринять, чтобы получить окончательный результат. Для всех нечетных чисел от 1 до 100 это 50 шагов (100/2). Внутри цикла вы используете арифметику (сложение, вычитание, умножение, деление), чтобы получить окончательное значение.

@for $i from 1 through 50 {
  $value: $i * 2 - 1;
  // stuff
}

DEMO

или немного более общая версия:

$max: 100;
$step: 2;

@for $i from 1 through ceil($max/$step) {
  $value: ($i - 1)*$step + 1;
  // stuff
}

DEMO

Ответ 3

Я бы использовал модуль для этого. Оператор модуля дает вам остаток от деления числа на другой номер. Например, (3% 2) даст вам 1, как будет (5% 2) или (7% 2).

Если вы использовали это:

@for $i from 1 through 100 {
    @if $i % 2 == 0 {
        #{$i}
    }
}

Вы получите 2,4,6,8,10... 100

Но вы хотите 1,3,5,7,9... 99 - поэтому смещайте его на 1:

@for $i from 1 through 100 {
    @if ($i+1) % 2 == 0 {
        .your-class-#{$i} {
          // do stuff
        }
    }
}

Ответ 4

Другой пример:

.my-class {
    $step    : 5;
    $from    : ceil( 1 /$step);
    $through : ceil( 100 /$step);
    $unit    : '%';

    @for $i from $from through $through {
      $i : $i * $step;
      width: $i#{$unit};
    }
}