Question

使用SCSS，我想创建一个mixin，它将接收参数并可以确定它是颜色还是渐变，并根据它创建background属性。

作为可能的参数输入：

任何颜色值（＃hex，rgba，color ...）。
任何颜色SCSS功能（rgba(color, 0.1)，darken(color, 15%) ...）为颜色。
渐变字符串（“top，rgba（30,87,153,1）0％，rgba（125,185,232,1）100％”）

的伪代码：

if color or SCSS color function 
  then background: color;
if gradient 
  then background: -webkit-linear-gradient(gradient);
       background: linear-gradient(gradient);
       background: -moz-linear-gradient(gradient);

我不想使用Compass或任何其他SASS库。

Answer 1

注意：我不建议使用Sass或Less mixins来执行供应商前缀。对渐变来说更是如此，因为旧的渐变语法和新的渐变语法不一样。最好将这些东西留给小型库，如无前缀或自动前缀等。

要回答您的问题，是的，可以区分颜色（或颜色函数输出）和字符串using the type_of function。

下面是一个代码片段，可以满足您的需求。我没有添加任何解释，因为我觉得它是自我解释的。如果您发现代码的任何部分很复杂，请给我留言，我会解释更多。

@mixin bg($value){
  @if type_of($value) == 'color' {
    background: $value;
  }
  @else if type_of($value) == 'string' {
    background: -webkit-linear-gradient(#{$value});
    background: -moz-linear-gradient(#{$value});
    background: linear-gradient(#{$value});
  }
  @else {
    @error "Invalid parameter. Mixin expects a color or color function or gradient as value. ";
  }
}

#demo.color {
  @include bg(red);
}
#demo.gradient {
  @include bg('top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%');
}
#demo.color-rgba {
  @include bg(rgba(127, 127, 127, 0.1));
}
#demo.color-rgba-sass {
  @include bg(rgba(red, 0.1));
}
#demo.color-hex {
  @include bg(#0f0);
}
#demo.color-function {
  @include bg(darken(red, 15%));
}
/* #demo.invalid-value { if this is uncommented, you'd get the error
  @include bg(1);
}*/

CodePen Demo（点击CSS标签上的“查看已编辑”按钮以查看输出）

SCSS mixin或函数来区分颜色或渐变

1 个答案: