SASS 中 Mixin + 插值 + 变量参数的组合 [重复]

Question

.green-oval-button {
    @extend .oval-button;
    @include radial-gradient($green-gradient...);

    &:active {
        @include radial-gradient($green-gradient-active...);
    }   
}

.blue-oval-button {
    @extend .oval-button;
    @include radial-gradient($blue-gradient...);

    &:active {
        @include radial-gradient($blue-gradient-active...);
    }   
}

---

是否可以用Mixin + Interpolation + Variable Arguments 简化以上SassScripts？

示例：导致错误

@mixin color-oval-button($color) {
    @extend .oval-button;
    @include radial-gradient(#{$color}-gradient...);

    &:active {
        @include radial-gradient(#{$color}-gradient...);
    }   
}

@include color-oval-button("$green");
@include color-oval-button("$blue");

Answer 1

变量插值在 SASS 中不可用，但根据创建者 Chris Eppstein 的说法，一旦 3.3 发布，就可以通过地图功能实现。 https://github.com/nex3/sass/issues/132

在此之前，您可以使用 2 个具有映射值的列表和一个 for 循环来进行排序。只需在与要调用的颜色变量相同的列表索引中指定所需的渐变。

 $colors: blue, green;
 $gradients: [gradient css], [gradient css];
    @for $i from 1 through length($colors) {
      @mixin #{nth($colors, $i}-oval-button($color) {
        @extend .oval-button;
        @include radial-gradient( #{nth($gradients, $i)} );
        &:active {
          @include radial-gradient( #{nth($gradients, $i)} );
        }   
      }
    }

给你：

@mixin blue-oval-button($color) {
  @extend .oval-button;
  @include radial-gradient(blue-gradient);
  $:active {
    @include radial-gradient(blue-gradient);
  }
}
etc....

对于更高级且更简洁的版本，请查看链接以了解如何编写查找函数。