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

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

示例：导致错误

@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

在此之前，您可以使用带有映射值和for循环的2个列表来执行某种操作。只需在列表的同一索引中指定所需的渐变作为要调用的颜色变量。

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

对于更漂亮且略显光滑的版本，请查看链接以了解如何编写查找功能。

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

1 个答案: