Писане на цикъл, който се увеличава със стойност, различна от 1 в Sass

В SASS цикълът се записва така:

@for $i from 1 through 100 {
    //stuff
}

Това би довело до 1, 2, 3, 4... чак до 100.

Как бихте направили цикълът да върви на интервали от две единици?

@for $i from 1 through 100 *step 2*{
    //stuff
}

Така че резултатът е 1, 3, 5, 7... до 99


person danivicario    schedule 14.09.2013    source източник


Отговори (4)


Няма го в документацията, защото просто не е внедрено. Това, което искате да направите, може да бъде направено с директивата @while.

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

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

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

ДЕМО

или малко по-обща версия:

$max: 100;
$step: 2;

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

ДЕМО

person Martin Turjak    schedule 01.11.2013

Можете ли да публикувате скриптовете за връзки към jquery във вашата публикация? Интересувам се от изходната част
person ConorLuddy    schedule 25.08.2016
comment
Благодаря, това е страхотно! - person Mikkel Fennefoss; 03.01.2018
comment
Няма проблем, @MikkelFennefoss - благодаря за гласуването :) - person ConorLuddy; 03.01.2018
comment
Това е моят предпочитан метод, защото не само е прост, но и не включва промяна/създаване на нови променливи, а само за да направя изчисленията. Той просто проверява резултата от проста операция. Красив. - person TerranRich; 14.03.2018
comment
Това е толкова добър начин за контролиране на обхвата, както и за преминаване. Благодаря, че сподели това. - person klewis; 04.03.2019
comment
Удоволствието е мое! :) - person ConorLuddy; 08.03.2019
comment
Един недостатък на това е, че трябва да правите (максимални) итерации, а не само една за всяка стъпка. Така че, ако направите @for $i from 1 through 100 {@if $i % 50 == 0 {}}, ще изпълните цикъла 100 пъти, за да направите 2 неща. Като се има предвид, че SASS е компилиран преди време, може би не е голяма работа, освен ако не го използвате често. - person Ben Hull; 09.08.2019

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

.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};
    }
}
person Nasdac    schedule 14.08.2015
comment
Можете ли да обясните защо това ще реши проблема? - person John Odom; 14.08.2015
comment
Не виждам какво добавя това към съществуващите отговори. - person cimmanon; 14.08.2015