我的box-shadow SASS @Mixin有什么问题？

Question

我正在尝试为SASS寻找一个有效的box-shadow @mixin。
我的CodePen: http://codepen.io/leongaban/pen/nCDos


在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));
}

你会如何编写它？

- Leon Gaban

Answer 1

对于简单的前缀mixin，特别是当属性具有可选值时，最好不要使用特定参数。在box-shadow的情况下，blur和offset都是可选的（请注意，您的mixin仅考虑了模糊度，而没有考虑偏移量）。

@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时不必重新学习它们。此外，您无需删除所有逗号。请注意，这是Compass编写所有前缀mixins的方式。

- cimmanon

Answer 2

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

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

http://codepen.io/anon/pen/GrIuh

- Adrift

---

啊，谢谢！:D 很快，再等10分钟我就可以检查了。 - Leon Gaban

这不适用于所有格式的box-shadow。请在此处查看https://css-tricks.com/almanac/properties/b/box-shadow。 - Rameez Rami

Answer 3

最佳解决方案是使用...运算符。因为，在不同的情况下，box-shadow的格式和参数数量可能会有所不同。

您可以在此处阅读有关此的所有信息https://css-tricks.com/almanac/properties/b/box-shadow

无论您的格式如何，此代码都将起作用

// mixins
@mixin box-shadow($shadow...) {
    box-shadow: $shadow;
    -webkit-box-shadow: $shadow;
    -moz-box-shadow: $shadow;
    -ms-box-shadow: $shadow;
    -o-box-shadow: $shadow;
}

.your-class-here {
  @include box-shadow(5px 5px 5px rgba(68, 68, 68, 0.6));
}

- Rameez Rami

Answer 4

我建议增加另一个参数以提高灵活性——扩展（https://www.w3schools.com/cssref/css3_pr_box-shadow.asp）：

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

现在你有一个混合器，可以真正生成各种盒子阴影。

- Manticore