Question

我喜欢使用SASS制作mixins，以帮助我实现良好的跨浏览器兼容性。我想制作一个看起来像这样的mixin：

@mixin box-shadow($value) {
    box-shadow: $value;
    -webkit-box-shadow: $value; 
    -moz-box-shadow: $value; 
}

我可以传递这样的东西：

@include box-shadow(inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f);

结果是这样的：

box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px #ff800f;
-moz-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px #ff800f;
-webkit-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px #ff800f;

然而，这不起作用，因为编译器认为我试图传递mixin 3参数。 box-shadow采用可变数量的逗号分隔位，因此我不能只定义像box-shadow($1,$2,$3)这样的mixin。

我试过传递

@include box-shadow("inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f");

并编译，但实际上并没有呈现样式。

有关如何解决此问题的任何提示？

Answer 1

变量参数

有时候mixin采用未知数量的参数是有意义的。例如，用于创建框阴影的mixin可能会将任意数量的阴影作为参数。对于这些情况，Sass支持“变量参数”，它是mixin声明末尾的参数，它接受所有剩余的参数并将它们打包为列表。这些参数看起来就像普通参数一样，但后面跟着....例如：

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

via：http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_arguments

Answer 2

SASS 3.1或更低

注意：如果您使用的是SASS 3.2+，请使用Rzar建议的变量参数功能。

只需在mixin中使用字符串插值，就像这样：

@mixin box-shadow($value) {
  -webkit-box-shadow: #{$value};               // #{} removes the quotation marks that
  -moz-box-shadow: #{$value};                  // cause the CSS to render incorrectly.
  box-shadow: #{$value};
}

// ... calling it with quotations works great ...
@include box-shadow("inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f");

感谢小费Ryan。

Answer 3

使用字符串插值

@include box-shadow(#{"inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f"});

Answer 4

有很多方法可以做到这一点，最好的方法就是使用mixin：

@mixin box-shadow($value...) {
  -webkit-box-shadow: $value;               
  -moz-box-shadow: $value;                  
  box-shadow: $value;
}

并将其包括在内：

@include box-shadow(inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6));

或

@mixin box-shadow($value) { -webkit-box-shadow: #{$value}; -moz-box-shadow: #{$value}; box-shadow: #{$value}; }

并将其包括在内：

@include box-shadow("inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6)");

或

@mixin box-shadow($value) { $value: unquote($value); -webkit-box-shadow: $value; -moz-box-shadow: $value; box-shadow: $value; }

或

@mixin box-shadow($value) { -webkit-box-shadow: $value; -moz-box-shadow: $value; box-shadow: $value; }

并将其包括在内：

@include box-shadow((inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6)));

Sass非常强大：）

Answer 5

我想指出你也可以在调用mixin时使用参数名传递一个值：

@mixin shadow($shadow: 0 0 2px #000) {
    box-shadow: $shadow;
    -webkit-box-shadow: $shadow; 
    -moz-box-shadow: $shadow; 
}

.my-shadow {
  @include shadow($shadow: 0 0 5px #900, 0 2px 2px #000);
}

请注意，scss是作用域的，因此如果稍后再次使用，$shadow仍将保留其mixin值。我不相信，在这种情况下遭受重新分配

Answer 6

这不编译：

+box-shadow(inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6))

这个编译：

+box-shadow((inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6)))

也就是说，在以逗号分隔的阴影列表周围添加一个括号，它应该可以工作：

+box-shadow( (myshadow1, myshadow2, ...) )

使用SASS将列表作为单个参数传递给mixin

6 个答案:

变量参数

SASS 3.1或更低