1

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

我试图将多个阴影混合到一个盒子阴影中，我们在传统的 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 中删除引号？

4

1 回答 1

4

似乎该 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");
}

或者，您可以使用可变参数。然后传递一个未引用的阴影列表。

@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);
}
于 2012-11-04T19:18:48.530 回答