Node.js中SASS编译filter:drop-shadow()内变量报错，求解决方案

在React项目中使用Node.js的sass包编译SCSS，复用CMS项目的SCSS文件时遇到编译错误。

涉及代码行：

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

报错信息：

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

完整Mixin代码：

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

原推测是编译器配置问题，寻求解决办法或可调整的配置。

这不是编译器配置问题，根源是Sass变量作用域规则：在@if/@else代码块内定义的变量，默认仅在当前代码块内生效，代码块外部无法访问。

提供两种修复方案：

• 方案一：在Mixin开头提前声明变量并赋默认值，分支内仅修改需要变更的变量

@mixin svg-shadow($size: 'top', $color: $night) {
  // 提前声明变量，统一作用域
  $a: 0.12;
  $b: 0px;
  $c: 5px;
  $d: 2px;

  @if $size == 'top' {
      $c: 5px; // 仅修改与默认值不同的变量
  }
  @else if $size == 'bottom' {
      $a: 0.05;
      $c: -2px;
  }
  // else分支与默认值一致，可省略
   
  filter: drop-shadow( $b $c $d rgba($color, $a));
}

• 方案二：使用!global关键字强制变量提升到Mixin作用域（不推荐，易引发全局变量污染）

@mixin svg-shadow($size: 'top', $color: $night) {
  @if $size == 'top' {
      $a: 0.12 !global;
      $b: 0px !global;
      $c: 5px !global;
      $d: 2px !global;
  }
  @else if $size == 'bottom' {
      $a: 0.05 !global;
      $b: 0px !global;
      $c: -2px !global;
      $d: 2px !global;
  }
  @else {
      $a: 0.12 !global;
      $b: 0px !global;
      $c: 5px !global;
      $d: 2px !global;
  }
   
  filter: drop-shadow( $b $c $d rgba($color, $a));
}

优先选择方案一，既符合Sass作用域规范，又能避免不必要的变量污染。

内容的提问来源于stack exchange，提问作者MeltingDog