缺少变量的 SCSS 的 Mixin Webpack 错误

【问题标题】：Mixin Webpack error for SCSS on missing variable缺少变量的 SCSS 的 Mixin Webpack 错误
【发布时间】：2021-09-06 12:49:32
【问题描述】：

SCSS 对我来说相当陌生...我在 mixins SCSS 文件中创建一个函数，在运行 gatsby develop 时，我收到了一个未定义变量的 SassError，尽管“变量”是一个参数：

Webpack SassError

关于如何解决这个问题的任何建议？这是_mixins.scss中使用的代码开头的结构：

@use './units';

// Add transitions to attributes
@mixin transition($attrs, $speed: normal) {
  $res: "";

  // Multiple attributes
  @if type-of($attrs) == list {
    @each $attr in $attrs {
      $res: #{$res}, _makeTransition($attr, $speed);
    }
  }
  // One/no attribute
  @else {
    $res: _makeTransition($attr, $speed);
  }

  transition: $res;
}

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

  // Attribute has default props
  @if type-of($attr) == string {
    $res: $attr map-get(units.$speed, $speed) cubic-bezier(0.4, 0, 0.2, 1);
  }
  // Attribute has custom props
  @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;
}

【问题讨论】：

标签： webpack sass

【解决方案1】：

发生这种情况是因为它在其范围内找不到$attr

@if type-of($attrs) == list {
    /*    ? $attr is defined here in @each scope */
    @each $attr in $attrs {
        $res: #{$res}, _makeTransition($attr, $speed);
    }
}
@else {
    $res: _makeTransition($attr, $speed);
}

从您的代码中，$attr 定义在 @each 范围内。但是，它在@else 范围内被引用。

如果我正确理解您的代码逻辑，在 @else 块中，它应该是 $attrs（带有 s），因为它不是一个列表：

$res: _makeTransition($attrs, $speed);

【讨论】：

非常感谢！