SASS can't compile variables within filter: dropshadow()?

I am using a SASS compiler in Node.js for my React project (https://www.npmjs.com/package/sass). I am reusing some SCSS files from a different project that exists on my CMS (the CMS compiles SCSS).

However, I am getting an error when I try to compile SCSS with the following line:

filter: drop-shadow( $b $c $d rgba($color, $a));

The error I get is:

SassError: Undefined variable.
   ╷
93 │   filter: drop-shadow( $b $c $d rgba($color, $a));

This variable is very much defined. I'm assuming my SASS compiler is just not set up for for this kind of variable usage. Would anyone know if there is a work around or setting I can change for this?

My full code is:

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

This is a classic case of local-scope (vs) mixin-level-scope. You are defining it within the @if or @else blocks. Hence it is not reading it.

Simply move it to the mixin level and it will work.

Solution:

@mixin svg-shadow($size: 'top', $color: $night) {
  // DEFINE YOUR VARIABLES AT MIXIN LEVEL HERE
  // GIVE THEM SOME INITIAL VALUES AS PER YOUR REQUIREMENTS
  $a: 0; // alpha
  $b: 0px; // horizontal
  $c: 0px; // vertical
  $d: 0px; // blur

  @if $size == 'top' {
    $a: 0.12;
    $b: 0px;
    $c: 5px;
    $d: 2px;
  }
  @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));
}