為什么我不能在 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

您可以使用變量創建 map：

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

這是 Codepen.io 的鏈接，例如