与SASS作为一个单一的论点，将一个名单列入混音
我喜欢与SASS混合使用，帮助我实现良好的跨浏览器兼容性。 我想制作一个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");
并编译，但实际上并没有渲染样式。
有关如何解决这个问题的任何提示？
variables参数
有时mixin采取未知数量的参数是有意义的。 例如，用于创build方框阴影的混合可能会将任意数量的阴影作为参数。 对于这些情况，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
SASS 3.1或更less
注意：如果您使用的是SASS 3.2+，那么请使用rzarbuild议的Variable Argumentsfunction。
只需在mixin中使用string插值，如下所示：
@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。
使用string插值
@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"});
有很多方法可以做到这一点，最好的方法就是像这样使用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)));
萨斯是非常强大的:)
我想指出的是，您也可以在调用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值。 我认为不太可能会在这种情况下重新分配
这不会编译：
+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, ...) )
