混合 + 插值 + SASS 中的变量参数的组合

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....

对于更漂亮且稍微光滑的版本，请查看链接以查看如何编写查找函数。