Question

我正在构建一个mixin，用于特定于项目的线性渐变。我的想法是我有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

我有一个类似的问题，我写了一个mixin，它应该为一个指南针mixin分配一个参数列表。这是我的解决方案（罗盘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 );

这些例子输出了一个wront css;

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

输出：

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

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

2 个答案: