Webpack处理SCSS mixin时报错：参数被识别为未定义变量如何解决

算力阿峰

2026-10-5

错误根因

你遇到的SassError是变量名写错导致的：transition mixin的单属性分支（else块）中直接使用了$attr变量，但该变量仅在多属性循环的@each语句内定义，不属于else块的作用域，你要传递的实际是mixin的入参$attrs。
另外你当前的多属性拼接逻辑会生成带前置逗号的无效属性值，也会引发编译问题。

修复代码

@use './units';

// 为指定属性添加过渡效果
@mixin transition($attrs, $speed: normal) {
  $res: null;

  // 多属性场景
  @if type-of($attrs) == list {
    @each $attr in $attrs {
      // 用append方法拼接过渡规则，自动处理逗号分隔
      $res: append($res, _makeTransition($attr, $speed), $separator: comma);
    }
  }
  // 单属性/无属性场景
  @else {
    // 核心修复：将$attr替换为mixin入参$attrs
    $res: _makeTransition($attrs, $speed);
  }

  transition: $res;
}

@function _makeTransition($attr, $speed) {
  $res: all map-get(units.$speed, $speed) cubic-bezier(0.4, 0, 0.2, 1);

  // 传入字符串属性名，使用默认配置
  @if type-of($attr) == string {
    $res: $attr map-get(units.$speed, $speed) cubic-bezier(0.4, 0, 0.2, 1);
  }
  // 传入配置Map，使用自定义参数
  @else if type-of($attr) == map {
    $speed: if(map-has-key($attr, speed), map-get($attr, speed), $speed);
    $res: map-get($attr, name)
      map-get(units.$speed, $speed)
      cubic-bezier(0.4, 0, 0.2, 1);
  }

  @return $res;
}