使用 SASS 将列表作为单个参数传递给 mixin [英] pass a list to a mixin as a single argument with SASS

问题描述

我喜欢用 SASS 制作 mixin，这有助于我实现良好的跨浏览器兼容性.我想做一个像这样的混合:

I like to make mixins with SASS that help me make good cross-browser compatibility. I want to make a mixin that looks like this:

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

我可以传递这样的东西:

to which I can pass something like this:

@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.

However, This doesn't work because the complier thinks I am trying to pass the mixin 3 arguments. box-shadow takes a variable number of comma separated bits, so I can't just define a mixin like 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");

它编译了，但实际上并没有渲染样式.

and it compiled, but didn't actually render the styles.

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

Any tips on how to resolve this?

推荐答案

变量参数

有时，mixin 接受未知数量的参数是有意义的.例如，用于创建框阴影的 mixin 可以将任意数量的阴影作为参数.对于这些情况，Sass 支持可变参数"，它们是混合声明末尾的参数，它接受所有剩余的参数并将它们打包为一个列表.这些参数看起来很像普通参数，但后面跟有 .... 例如:

Variable Arguments

Sometimes it makes sense for a mixin to take an unknown number of arguments. For example, a mixin for creating box shadows might take any number of shadows as arguments. For these situations, Sass supports "variable arguments," which are arguments at the end of a mixin declaration that take all leftover arguments and package them up as a list. These arguments look just like normal arguments, but are followed by .... For example:

@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 将列表作为单个参数传递给 mixin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！