I'm struggling to create a Sass mixin for the box-shadow property. Here's a snippet of the existing code:
#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 consolidate all this into one mixin is proving challenging as I navigate the limited documentation on using logic within mixins.
I want to create a mixin like this:
@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 causing errors because Sass seems unable to evaluate the $inset variable.
The example above highlights the challenge I face in dealing with whether the box-shadow should be inset or not. Another issue arises when multiple box-shadows are declared on a single element, as seen in #theLastDiv.
@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);
}
At times, an element may have just one box-shadow, while other times it requires two separate box-shadows. Is it possible that Sass can't handle this scenario and would necessitate separate mixins (one for elements with one shadow, another for those with two)?
To make things more complex, how does the opacity issue described earlier play into this? I'd appreciate any insights or corrections if my understanding of the problem is off base. Thank you!