What is wrong with my box-shadow SASS @Mixin?

Question

I am trying to find a working box-shadow @mixin for SASS.

My CodePen: http://codepen.io/leongaban/pen/nCDos


On stackoverflow I found this question and used it and the answer exactly, however I'm still getting the following error:

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

How would you write it?

Answer 1

For a simple prefix mixin, especially when the property has optional values, it would be better to not have specific arguments. In the case of box-shadow, blur and offset are both optional (note that your mixin only accounts for blur, not offset).

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

This way, you've already practiced the correct order for the values and you don't have to relearn them when your prefix mixin is no longer needed. Also, you won't have all of those commas to remove. Note that this is how Compass has all of its prefix mixins written.

Answer 2

You need to add commas between each component value:

.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