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循环从特定值增加到数量值

2 个答案: