SASS @for循环按金额从特定值到值的增量

Question

我需要使用SASS的@for循环为我的类设置特定的高度。我希望@mixin的输出如下所示：

.class-1 {
  height: 45px;
}

.class-2 {
  height: 55px;
}

.class-3 {
  height: 65px;
}

.class-4 {
  height: 75px;
}

这个例子是接近的，但我不知道我应该使用什么计算开始于45，结束在75，并迭代每个值20：

@for $i from 0 through 3 {
  $value: ($i + 2) * 20;
  .test-#{$i + 1} { height: $value; }
}

Answer 1

下面的@for循环生成所需的css：

SCSS:

@for $i from 1 through 4 {
  .class-#{$i} {
     height: 35px + ($i * 10);
  }
}

生成CSS:

.class-1 {
  height: 45px;
}

.class-2 {
  height: 55px;
}

.class-3 {
  height: 65px;
}

.class-4 {
  height: 75px;
}

Answer 2

$tile-height: 20;

@mixin tile-height($size) {
    height: $size * $tile-height + px;
}

@for $i from 1 through 5 {
    .h-#{$i}-x {
        @include tile-height($i);
    }
}