我的盒影SASS@Mixin有什么问题？

我正在尝试为SASS找到一个工作盒shadow@mixin

我的代码笔：


在stackoverflow上，我使用了它并准确地给出了答案，但是我仍然得到以下错误：

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

.login_window {
    width: 200px; height: 100px; background: red;

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

---

如何编写？

您需要在每个组件值之间添加逗号：

.login_window {
    width: 200px; height: 100px; background: red;
    @include box-shadow(inset 0, 1px, 1px, rgba(0, 0, 0, 0.5));
}

---

对于简单的前缀mixin，尤其是当属性具有可选值时，最好不要使用特定的参数。在长方体阴影的情况下，模糊和偏移都是可选的（请注意，mixin只考虑模糊，而不考虑偏移）

---

这样，您已经练习了值的正确顺序，当不再需要前缀mixin时，您不必重新学习它们。此外，您不会删除所有这些逗号。请注意，它的所有前缀mixin都是这样写的。

我建议添加另一个参数以获得更大的灵活性-spread（）：

---

现在你有了一个mixin，它可以生成各种各样的方块阴影。

啊，谢谢！：以最快的速度，再过10分钟我就可以检查了

@mixin box-shadow($value) {
    -webkit-box-shadow: $value;
    -moz-box-shadow: $value;
    box-shadow: $value;
}

.foo {
    @include box-shadow(0 0 .25em .25em black);
}

.bar {
    @include box-shadow(inset 1px 1px 1px blue);
}

@mixin box-shadow($top, $left, $blur, $spread, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow: $top $left $blur $spread $color inset;
    -moz-box-shadow: $top $left $blur $spread $color inset;
    box-shadow: $top $left $blur $spread $color inset;
  } @else {
    -webkit-box-shadow: $top $left $blur $spread $color;
    -moz-box-shadow: $top $left $blur $spread $color;
    box-shadow: $top $left $blur $spread $color;
  }
}