为什么我不能在我的 Sass 循环中使用 @include 内的变量？

Question

假设我有以下混入：

@mixin type-h1 {
    font-size: 36px;
    font-weight: bold;
}
        
@mixin type-h2 {
    font-size: 28px;
    font-weight: bold;
}
        
@mixin type-h3 {
    font-size: 24px;
    font-weight: bold;
}

现在我创建了实用程序类:

.type-h1 {
  @include type-h1;
}

.type-h2 {
  @include type-h2;
}

.type-h3 {
  @include type-h3;
}

到目前为止一切都很好。现在我想简化我的代码并使用 Sass 循环生成实用程序类。这是我的：

$variable: 1, 2, 3;
@each $value in $variable {
  .type-h#{$value} {
    @include type-h$variable;
  }
}

有人知道为什么这个循环不起作用吗？

Answer 1

您可以使用变量创建地图：

$vars: (1: 36px, 2: 28px, 3: 24px);

然后将mixins合并为一个：

@mixin types($value) {
  font-size: $value;
  font-weight: bold;
}

最后您可以通过以下方式生成实用程序：

@each $size, $value in $vars {
  .type-h#{$size} {
    @include types($value);
  }
}

Here is link to Codepen.io with example

为什么我不能在我的 Sass 循环中使用 @include 内的变量？

Why can't I use variable inside @include in my Sass loop?

css

sass

scss-mixins