我的盒子阴影SASS @Mixin出了什么问题？

Question

我正在努力为SASS找到一个工作盒阴影@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));
}

你会怎么写的？

Answer 1

对于简单的前缀mixin,特别是当属性具有可选值时,最好没有特定的参数.在箱阴影的情况下,模糊和偏移都是可选的(请注意,您的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编写所有前缀mixin的方式.

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