I have created a Sass mixin for box-shadow effects in my project:
@mixin box-shadow($hLength, $vLength, $blur, $spread, $colour, $type:""){
@if $type != "" {
-webkit-box-shadow:$type $hLength $vLength $blur $spread $colour;
-moz-box-shadow:$type $hLength $vLength $blur $spread $colour;
box-shadow:$type $hLength $vLength $blur $spread $colour;
}
}
So far, this mixin has been working well for me.
However, I am now faced with the need to make some modifications.
In my application, I have list items that can be assigned one of 11 classes, each controlling the color and icon of the item.
Here are some examples of the variables used in my code:
$channel1: #19BC9C;
$channel2: #F1C40E;
$channel3: #9B59B6;
$channel4: #3398DB;
The SASS code for styling these list items looks like this:
li {
&.channel1 {
@include box-shadow(-3px, 0px, 0px, 0px, $channel1, inset);
}
&.channel2 {
@include box-shadow(-3px, 0px, 0px, 0px, $channel2, inset);
}
}
The issue I am encountering is that the pixel values and 'inset' property remain constant across all class elements. Since there is no separate property for box-shadow-color, I cannot individually modify the parameters.
I had attempted to store the values like -3px, 0px, 0px, 0px in a variable ($channelBorder) and pass it into the mixin, but unfortunately, this approach did not work.
If anyone has a viable solution to this problem, I would greatly appreciate it. I prefer to keep my existing mixin structure intact as much as possible.