SASS使用变量列表填充混合中的参数

Question

我正在本地构建一个线性渐变的混合特定于一个项目。我的想法是，我有6个不同的梯度方案。我试图从一个变量中传递参数的所有值。我不确定我现在是否超越了SASS支持的范围。另外，这3个文件都位于单独的文件中，这些文件被导入到主站点scss文件中。

任何指导都将不胜感激。

$gradientBlue: #68bafa, #279bf2, #2891e2;

@mixin verticalGradient($color-1, $color-2, $color-3: "", $color-4: "", $color-5: "" ) {
  background: $color-1;
  @include pie;
  @include filter-gradient($color-1, $color-2);  
  @include background-image(linear-gradient(top, $color-1 0%, $color-2 100%));
  @if #{$color-3} != none {
    text-shadow: 1px 1px 1px #{$color-3};
  }
  @if #{$color-4} != none {   
    &:hover {
      @include pie;
      background: $color-4;
      text-shadow: 1px 1px 1px $color-5;
    } 
  }
}

@include verticalGradient($gradientBlue);

Answer 1

好的。尝试如下所示：

$gradientBlue: #68bafa, #279bf2, #2891e2;

@mixin vertical-gradient($colors) {    
  @include background(linear-gradient(nth($colors, 1), nth($colors, 2)));
  @if length($colors) >= 3 {
    text-shadow: 1px 1px 1px nth($colors, 3);
  }
  @if length($colors) >= 4 {
    background: nth($colors, 4);
  }
}

body {
  @include vertical-gradient($gradientBlue);
}

Answer 2

我有一个类似的问题，我写了一个混入，它应该分配一个指南针混入的参数列表。下面是我的解决方案(使用指南针0.12.2)：

@mixin single-box-shadow-fallback( $color, $arg... ) {
  @include single-box-shadow( $color, $arg... );
    .lt-ie9 & {
      border: 1px solid $color;
    }
  }
}

打电话

@include single-box-shadow-fallback( #CCC, 0, 0, 2px, 0, true );

这些例子输出一个错误的css；

@mixin single-box-shadow-fallback( $color, $arg ) {
  @include single-box-shadow( $color, $arg );
}

输出：

  box-shadow: 0, 0, 2px, 0, true 0px 5px #cccccc;