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);
    }
}

SASS @for 循环从特定值递增到值

SASS @for loop increment from specific value to value by amount

html

css

sass