Multiple box-shadow declarations in Sass

Question

I would like to create a Sass mixin for the box-shadow property but am running into some trouble. Some of the existing code looks like this.

#someDiv {   -moz-box-shadow:0 0 5px rgba(0,0,0,.25); }  #someOtherDiv {   -moz-box-shadow:0 0 5px rgba(0,0,0,.25) inset; }  #theLastDiv {   -moz-box-shadow: 0 0 5px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.2) inset; } 

Trying to roll all of this into 1 mixin is becoming problematic. The documentation for using logic within mixins is pretty sparse.

I would like to create some mixin along the lines of:

@mixin boxShadow($xOffSet, $yOffSet, $blur, $red, $green, $blue, $opacity, $inset : false) {   @if $inset == true {     -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue) inset;   } @else {     -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue);   } } 

This is throwing errors because I guess Sass can't evaluate the $inset variable.

The previous example only demonstrates the problem I am having when it comes to to box-shadow being inset or not. The other problem I am having is when there are multiple box-shadows being declared on a single element. Refer to #theLastDiv described above if for reference.

@mixin boxShadow($declarations : 2, $xOffSet1, $yOffSet1, $blur1, $red1, $green1, $blue1, $opacity1 $xOffSet2, $yOffSet2, $blur2, $red2, $green2, $blue2, $opacity2) {   @if $declarations == 1 {     -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue);   } @else if $declarations == 2 {     -moz-box-shadow: #{$xOffSet1}px #{$yOffSet1}px #{$blur1}px rgba($red1,$green1,$blue1), #{$xOffSet2}px #{$yOffSet2}px #{$blur2}px rgba($red2,$green2,$blue2);   } 

Sometimes an element has one box-shadow and other times it has to separate box-shadows. Am I mistaken that Sass lacks the ability to decipher this logic and that to accomplish this would require separate Mixins (one for elements with one box shadow, another for mixins with two box shadows).

And to complicate the matter, how does the opacity problem described above factor into this? Would love to get some feedback on this. Let me know if I'm mistaken or the way I'm thinking about the problem is flawed in general. Thanks!

Answer 1

You can use a variable argument like this:

// Box shadows @mixin box-shadow($shadow...) {   -webkit-box-shadow: $shadow;      -moz-box-shadow: $shadow;                  box-shadow: $shadow; } 

That allows you to have commas in the argument passed. so you can pass all the shadows you want.

An example using it:

@include box-shadow(2px 2px 2px rgba(#ccc, .8), -2px -2px 2px rgba(#ccc, 0.8)) ; 

Pass in color variables like this:

$shadow-color: red;  // could also be a #F9F8F6 type color @include box-shadow(0 2px 2px rgba($shadow-color, .9)); 

UPDATE

$shadow-color: red;  // could also be a hex (like #F9F8F6) type color @include box-shadow(0 2px 2px rgba($shadow-color, .9)); 

In case you haven't seen arguments with the elipsis allowing a variable number of arguments before (ie splats) check this link: http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#variable_keyword_arguments