SASS, What is the correct way to call a mixin?

Question

I just started using SASS and I am trying to figure out how to create a box shadow mixin...

I copied this mixin from another stack overflow post..

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

However I am not sure exactly how to format my @include

This is what I have so far for my @include

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

And this is my output error...

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

Answer 1

Bad syntax.

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

(Edited in 2014 to include changes to Sass' syntax made in the last few years)

Answer 2

I'm new to Sass and the accepted answer didn't work to me; the order of the values looks wrong and the values also require commas after each one. I used the following:

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

Answer 3

I think you should include some defaults:

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

That way, you don't need to set your options every time if you want to use the same code:

.your-selector {
    @include box-shadow();
}

I have also corrected the order of the options: horizontal normally appears before vertical.