SASS 是一种预处理器语言，它可以在 CSS 的基础上提供更多的功能和语法，比如变量、混合、嵌套等。但是在使用 SASS 时，可能会出现 "Undefined variable"（未定义变量）的编译错误，这是由于 SASS 缺少变量的定义造成的。本文将为大家介绍 SASS 编译出现 "Undefined variable" 的解决方案。
解决方案
在 SASS 中，变量需要事先进行定义，否则就会出现 "Undefined variable" 的错误。因此，解决这个问题的办法就是提前定义变量。下面是具体的解决方案：
1. 定义变量
在使用变量之前，需要先定义变量。在 SASS 中，使用 $ 符号来定义变量。比如：
$color: #F00;
上面的代码定义了一个名为 color 的变量，并将其值设为红色。注意，SASS 变量的命名遵循 CSS 变量的命名规则。
2. 使用变量
在定义了变量之后，就可以在样式中使用变量了。比如：
.header {
background-color: $color;
}上面的代码中，使用了之前定义的 color 变量来设置 .header 元素的背景颜色。
3. 导入文件
在某些情况下，我们可能需要将变量定义和样式分别放在不同的文件中。这时候，就需要通过 @import 来导入变量定义文件。比如：
@import 'variables.scss';
.header {
background-color: $color;
}上面的代码中，variables.scss 文件中定义了 color 变量，然后在样式文件中通过 @import 导入了 variables.scss 文件，从而可以使用其中定义的变量。
总结
在使用 SASS 时，遇到 "Undefined variable" 的编译错误，一般是由于缺少变量定义造成的。解决这个问题的办法就是提前定义变量。同时，我们还可以通过导入文件的方式来统一管理变量定义。掌握了这些技巧，就能更加轻松地使用 SASS 编写样式了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64917c3448841e9894f82c02