问题描述
在进行 Sass 编译时，当我们定义变量时，有时会遇到类似这样的错误提示：
Syntax error: Invalid CSS after "$color:": expected expression (e.g. 1px, bold), was ";"
这种错误提示一般出现在编写 Sass 变量的时候，如：
$color: ;
问题分析
这个错误提示的意思是，Sass 在编译过程中出现了无效的 CSS 表达式，因为 Sass 变量必须赋值为一个有效的 CSS 样式表达式，例如：
$color: #f30;
这是一个有效的 Sass 变量赋值，表示将变量 $color 的值定义为 #f30，也就是所谓的“颜色值”。
因此在定义 Sass 变量时，必须为其赋值一个有效的 CSS 样式表达式，否则就会出现上述错误提示。
解决方法
要解决这个问题，我们首先要明确：这个错误提示的原因是 Sass 编译器无法识别我们编写的 Sass 代码，因此需要检查我们编写的代码是否符合 Sass 语法的规范。
其次，我们还需要了解 Sass 变量的常见赋值类型，以便我们能够正确定义 Sass 变量，例如：
- 颜色值：
$color: #f30; - 数字值：
$width: 100px; - 字符串：
$font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; - 布尔值：
$is-valid: true;
通过正确的定义 Sass 变量，我们就可以避免编译出错。
以下是一个正确使用 Sass 变量的示例代码：
// 定义 Sass 变量
$primary-bg: #f30;
// 定义 Sass 样式
body {
background-color: $primary-bg;
}在这个示例代码中，我们定义了一个 $primary-bg 变量并赋值为 #f30，然后在 body 样式中使用了变量 $primary-bg，将背景色定义为该变量的值。
总结
对于 Sass 编译出错：invalid CSS after “$color:”，我们需要认真检查我们编写的 Sass 代码是否符合 Sass 语法、是否正确定义 Sass 变量的赋值类型等，以便避免类似的错误出现。正确使用 Sass 变量不仅可以提高代码的重用性和可维护性，还可以让我们编写更加 modulized、DRY（Don't Repeat Yourself，不重复自己）的代码，提高前端开发的生产力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475bf85968c7c53b02c0900