Question

我刚刚开始使用SASS，我正在试图弄清楚如何创建一个盒子阴影混合......

我从另一个堆栈溢出帖子中复制了这个mixin ..

@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

我是Sass的新手，接受的答案对我不起作用;值的顺序看起来是错误的，并且值在每个值之后也需要逗号。我使用了以下内容：

@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年，看起来事情已经从接受的答案中再次发生了变化。引用Compass文档和examples here，以下内容适用于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

对于＆＃39; Silverback＆＃39;一个例子是：

@include box-shadow(inset 0, 1px, 1px, rgba(0, 0, 0, 0.075));

它包括被遗忘的逗号“像素67＆＃39;评论说。

SASS，调用mixin的正确方法是什么？

5 个答案: