我刚开始使用SASS，我试图找出如何创建一个盒子阴影混入...
我复制从另一个堆栈溢出后该混入..
@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
-webkit-box-shadow:$top $left $blur $color #{$inset};
-moz-box-shadow:$top $left $blur $color #{$inset};
box-shadow:$top $left $blur $color #{$inset};
}
但是我不知道到底如何格式化我@include
这是我到目前为止我@include
@include box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
这是我的输出错误...
error(Line 1003: Invalid CSS after "...lude box-shadow": expected "}", was ": inset 0 1px 1...")
Answer 1:
语法错误。
使用@include box-shadow(0, 1px, 1px, rgba(0, 0, 0, 0.075), inset);
（2014年编辑，包括更改Sass的语法在过去的几年中取得）
Answer 2:
我是新来的无礼和接受的答案没有工作给我; 值的顺序看起来错误和价值观也需要每一个逗号之后。 我用了以下内容：
@include box-shadow(0, 1px, 1px, rgba(0, 0, 0, 0.075), inset);
Answer 3:
我想你应该有一些默认设置：
@mixin box-shadow($left:0, $top:2px, $blur:2px, $color:#000, $inset:"") {
-webkit-box-shadow:$left $top $blur $color #{$inset};
-moz-box-shadow:$left $top $blur $color #{$inset};
box-shadow:$left $top $blur $color #{$inset};
}
这样一来，如果你想使用相同的代码，你不需要每次都设置选项：
.your-selector {
@include box-shadow();
}
我也修正的选项的顺序：水平垂直之前通常出现。
Answer 4:
在2016年，看起来事情已经从接受的答案又变了。 Referecing指南针文档和例子在这里 ，下面将在SCSS文件的工作：
@include box-shadow(rgba(0, 0, 0, 0.075)0 0 3px 1px inset);
影子是非常微弱的，所以我实际使用：
@include box-shadow(rgba(0, 0, 0, 0.75)0 0 3px 1px inset);
对于多重阴影：分隔每个阴影用逗号。
@include box-shadow(rgba(0, 0, 0, 0.75)0 0 3px 1px inset, rgba(blue, 0.4) 0 0 5px 5px);
Answer 5:
对于“银背”一个例子是：
@include box-shadow(inset 0, 1px, 1px, rgba(0, 0, 0, 0.075));
它包括被遗忘的逗号是“像素67”评论道。
文章来源: SASS, What is the correct way to call a mixin?
