SASS, What is the correct way to call mixin?

Question

I just started using SASS and I'm trying to figure out how to create a shadow box tag ...

I copied this mixin from another column ..

@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 don’t know exactly how to format my @include

This is what I have for my @include

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

And this is my conclusion 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 over the past few years)

Answer 2

I am new to Sass, and the accepted answer did not help me; the order of the values ​​does not look right, and the values ​​also require commas after each of them. 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 default values:

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

Thus, you do not need to set your parameters each time if you want to use the same code:

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

I also adjusted the order of the options: the horizontal usually appears in front of the vertical.

Answer 4

In 2016, it looks like things have changed again from the accepted answers. Referecing Compass and examples here , the following will work in the SCSS file:

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

This shadow is very faint, so I actually used:

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

For multiple shadows: Separate each shadow with a comma.

@include box-shadow(rgba(0, 0, 0, 0.75)0 0 3px 1px inset, rgba(blue, 0.4) 0 0 5px 5px);

Answer 5

For Silverback, an example would be:

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

It includes forgotten commas that “pixel 67” commented on.