在@for语句中SASS多个增量值

时间:2017-04-05 16:59:02

标签: sass increment

我有一个循环,可以生成0-5之间的数字,但希望它也可以生成最多20个,但是以5的倍数生成。

期望的结果将是:

0,1,2,3,4,5,10,15,20

这可以在单个@for语句中使用吗?

1 个答案:

答案 0 :(得分:3)

@for $i from 0 through 20 {
  @if $i < 5 and $i > 0 {
    .number-#{$i} {
            height:(#{$i}px);
        }
  }
    @if $i % 5 == 0 {
        .number-#{$i} {
            height:(#{$i}px);
        }
    }
}

输出为

.number-0 {
  height: 0px;
}

.number-1 {
  height: 1px;
}

.number-2 {
  height: 2px;
}

.number-3 {
  height: 3px;
}

.number-4 {
  height: 4px;
}

.number-5 {
  height: 5px;
}

.number-10 {
  height: 10px;
}

.number-15 {
  height: 15px;
}

.number-20 {
  height: 20px;
}

for循环将经历0到20.我通过第一个if语句检查1-5,使用模数我检查可以被5整除。