解决 Sass 编译过程中出现 “Undefined variable…” 错误

问题描述

在使用 Sass 编写样式时，有可能会出现“Undefined variable…” 的错误，例如：

$primary-color: blue;
.selector {
  color: $primary-color;
}

在这个例子中，若 $primary-color 未被定义，就会出现以下错误：

Error: Undefined variable: "$primary-color".

在 Sass 中，变量的作用域是在它被声明的块（如 mixin、函数、规则）内，或是全局作用域内。如果你的变量是在另一个块内定义的，它就没办法被找到。

解决方案

方案 1：全局变量

将变量定义在全局的 :root 中，可以让所有样式都能访问变量。

:root {
  --primary-color: blue;
}
.selector {
  color: var(--primary-color);
}

如果使用的是 Sass 而不是 CSS 变量，可以采用下面的方式定义全局变量：

$primary-color: blue !global;
.selector {
  color: $primary-color;
}

在 !global 标记的变量可以在任何地方被访问到。

方案 2：引入变量文件

在 Sass 中，可以使用 @import 引入另一个文件的变量。

例如，在主文件中使用以下语句引入 _variables.scss 文件：

@import 'variables';

在 _variables.scss 文件中定义变量：

$primary-color: blue;

现在，主文件中就可以使用 $primary-color 了：

.selector {
  color: $primary-color;
}

方案 3：Mixin

使用 mixin 可以避免在样式中手动使用变量。

例如，在 _mixins.scss 文件中定义了一个 mixin：

@mixin theme-color {
  $primary-color: blue;
  color: $primary-color;
}

在样式中使用该 mixin：

.selector {
  @include theme-color();
}

这样，可以避免在样式中手动使用 $primary-color 变量。

总结

以上三种方案都可以用来解决 Sass 编译过程中出现 “Undefined variable…” 错误，建议在项目中加入统一的变量文件，避免手动使用变量。对于复杂样式可以使用 mixin，增加代码的可读性和可维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b25aa0add4f0e0ffb899f0