我如何在mixin中解析字符串参数，或者可能是从结果css中删除引号的方法？ （.scss - SASS）

Question

我在SCSS（或其他任何类型的编码rs）中非常新手只是在玩sass，然后我就遇到了问题。

我试图使用混合多个阴影到一个盒子阴影，我们都知道在tradicional css中，它应该是这样的：

box-shadow: 0 1px 1px #333, 0 0 10px #222

然后我编写了这个mixin：

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

结果几乎是我想要的：

-moz-box-shadow: "0px 1px 1px black, 0px 0px 3px black";
-webkit-box-shadow: "0px 1px 1px black, 0px 0px 3px black";
box-shadow: "0px 1px 1px black, 0px 0px 3px black";

Buuut ......很遗憾......

引号不允许代码工作

如何解析.scss（SASS）中的字符串参数，或从生成的css中删除引号的一种方法？

Answer 1

似乎unquote()功能正是您所寻找的：

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

h1 {
  @include set_shadow("0 1px 1px #333, 0 0 10px #222");
}

或者，您可以使用variable arguments。然后传递一个不带引号的阴影列表。

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

h1 {
  @include set_shadow(0 1px 1px #333, 0 0 10px #222);
}