SASS，叫混音的正确方法是什么？

我刚开始使用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};
    }

error(Line 1003: Invalid CSS after "...lude box-shadow": expected "}", was ": inset 0 1px 1...")

但是，我不确定如何准确格式化我的

@include

这是我迄今为止为@include所做的工作

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

这是我的输出错误…

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

error(Line 1003: Invalid CSS after "...lude box-shadow": expected "}", was ": inset 0 1px 1...")

糟糕的语法

使用包含框阴影（0，1px，1px，rgba（0，0，0，0.075），插入）

---

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

我是Sass新手，接受的答案对我不起作用；值的顺序看起来有误，并且每个值后面都需要逗号。我使用了以下方法：

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

---

对于“Silverback”，示例如下：

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

---

它包括“pixel 67”注释中被遗忘的逗号

我认为您应该包括一些默认设置：

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

---

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

2016年，似乎情况再次发生了变化，与公认的答案不同。参考指南针文档，以下内容将在SCSS文件中使用：

@包含框阴影（rgba（0,0,0,0.075）0 0 3px 1px插图）

那个阴影很暗，所以我实际上用了：

@包含框阴影（rgba（0,0,0,0.75）0 0 3px 1px插图）

对于多个阴影：
用逗号分隔每个阴影

@包含框阴影（rgba（0,0,0,0.75）0 0 3px 1px插入，rgba（蓝色，0.4）0 0 5px 5px）
这将只允许您使用一个阴影。被接受的答案允许多个。你能举个例子说明你在描述什么吗？如果将接受答案中提供的语法与问题中的mixin一起使用，我会收到一个错误：mixin box shadow缺少参数$left。将此与接受答案一起使用，因为语法错误
忘记了逗号
，我想从技术上讲，您可以使用此语法，但我认为如果要遵循给定的mixin变量顺序你必须把“inset”放在末尾（不要说它在语法上属于那里）；看起来你可以在这4个点中输入任何你想要的内容，它会不顾一切地把它吐出来：
@包括盒子阴影（狗、猫、青蛙、蚊虫）但你是对的，是逗号让它起作用。我明白你的意思，我对SASS也很熟悉，实际上我是以你为例的。另一种不使用逗号的方法是传递不同的参数
@mixin-box-shadow（$shadow…{-webkit-box-shadow:$shadow；-moz-box-shadow:$shadow；box-shadow:$shadow；}
@包括box-shadow（0.20px rgba（$black，0.8））-或-
@包括方框阴影（0px 1px 4px rgba（$黑色，0.3），0px 0px 40px rgba（$黑色，0.1）插图）最后就像其他任何东西一样，有很多方法可以做同样的事情。尝试了这个例子，它似乎不起作用，加上列出的选项不符合顺序。没有人询问指南针。问题是在试图在OP中使用mixin时特别询问语法错误。