I have integrated a SASS compiler into my Node.js environment for my React project (https://www.npmjs.com/package/sass). I am reusing SCSS files from another project stored in my CMS, which compiles SCSS as well.
However, I encountered an error when attempting to compile SCSS with the line:
filter: drop-shadow( $b $c $d rgba($color, $a));
The specific error message is:
SassError: Undefined variable.
╷
93 │ filter: drop-shadow( $b $c $d rgba($color, $a));
Despite having defined the variable, it seems that my SASS compiler may not support this type of variable usage. Can anyone suggest a workaround or adjustment that I can make?
This is my complete code snippet:
@mixin svg-shadow($size: 'top', $color: $night) {
@if $size == 'top' {
$a: 0.12; // alpha
$b: 0px; // horizontal
$c: 5px; // vertical
$d: 2px; // blur
}
@else if $size == 'bottom' {
$a: 0.05;
$b: 0px;
$c: -2px;
$d: 2px;
}
@else {
$a: 0.12;
$b: 0px;
$c: 5px;
$d: 2px;
}
filter: drop-shadow( $b $c $d rgba($color, $a));
}