我喜欢用 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 采用可变数量的逗号分隔位,所以我不能只定义像这样的 mixinbox-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");
它编译了,但实际上并没有渲染样式。
关于如何解决这个问题有什么建议吗?