1

我正在本地为项目特定的线性渐变构建一个 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);
4

2 回答 2

3

当然。尝试这样的事情：

$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);
}
于 2013-04-16T23:54:11.597 回答
0

我有一个类似的问题，我写了一个 mixin，它应该将一个参数列表分配给一个 compass 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 );



这些示例输出错误的 css；

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

输出：

  box-shadow: 0, 0, 2px, 0, true 0px 5px #cccccc;
于 2014-01-31T13:28:24.117 回答