6

我刚开始使用 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...")
4

5 回答 5

17

语法错误。

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

（2014 年编辑，包括过去几年对 Sass 语法所做的更改）

于 2012-05-03T16:14:48.390 回答
9

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

@include box-shadow(0, 1px, 1px, rgba(0, 0, 0, 0.075), inset);
于 2013-07-28T04:48:36.970 回答
4

我认为你应该包括一些默认值：

@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();
}

我还更正了选项的顺序：水平通常出现在垂直之前。

于 2014-09-29T11:45:32.363 回答
0

2016 年，看起来事情与接受的答案再次发生了变化。在此处参考 Compass 文档和示例，以下内容将在 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);

于 2016-03-16T20:59:01.537 回答
-1

对于“银背”，一个例子是：

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

它包括“pixel 67”评论的被遗忘的逗号。

于 2014-05-08T20:28:02.200 回答