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

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采用可变数量的逗号分隔位,所以我不能只定义一个mixin box-shadow($1,$2,$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 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);
}

通过: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"});