前言
Sass 是一种基于 CSS 的预处理器，它提供了许多功能和语法，能够简化 CSS 的开发过程，提高开发效率。
然而，在使用 Sass 进行编译的过程中，有时候会出现一些错误，比如 “Invalid CSS on line…” 错误，本文将为您提供解决方案。
问题分析
在 Sass 的编译过程中，如果出现了 “Invalid CSS on line…” 错误，通常是因为 Sass 在编译中遇到了无法识别的 CSS 语法。比如以下代码：
.my-class {
font: bold 12px/14px; //这里 font 的写法是不正确的，Sass 无法识别
}在编译的过程中，Sass 将会提示以下错误信息：
Error: Invalid CSS after " font: bold": expected ";", was "12px/14px;"
on line 2 of style.scss, in `my-class`这个错误信息告诉我们，Sass 遇到了一个无法识别的 CSS 语法，即在 font 属性中，缺少了一个分号。
解决方案
要解决 “Invalid CSS on line…” 错误，我们就要先找出错误的原因，再针对性地进行修改。
找出错误的原因
在 Sass 编译过程中，如果出现了 “Invalid CSS on line…” 错误，我们可以通过以下几个步骤来找出错误的原因：
打开 Sass 编译器的输出窗口，查看错误信息。
根据错误信息中提供的文件名、行号和列号，找到出错的代码行。
仔细阅读出错的代码行，找出其中是否有语法错误、拼写错误等问题。
进行针对性的修改
根据错误信息和代码分析的结果，我们可以进行针对性的修改，来解决 “Invalid CSS on line…” 错误。以下是几类常见的解决方案：
方案一：添加遗漏的分号
如前面的示例代码，我们可以在 font 属性的值后面添加一个分号，来解决这个错误。修改后的代码如下：
.my-class {
font: bold 12px/14px;
}方案二：修正写法错误
在 Sass 中，有些 CSS 属性的写法与普通的 CSS 略有不同，例如 border-radius 属性。如果我们在使用 Sass 的过程中，将它写成了普通的 CSS 写法，就会出现 “Invalid CSS on line…” 错误。比如以下代码：
.my-class {
border-radius: 5px; //这里的写法是不正确的，Sass 无法识别
}我们需要将其修正为 Sass 的写法，即使用 border 属性来表达 border-radius。修改后的代码如下：
.my-class {
border: 5px solid $black;
border-radius: 5px;
}方案三：检查变量、函数等的正确性
在 Sass 中，我们可以使用变量、函数等语法来简化开发过程。但是，在使用它们的过程中，有时也会出现错误。比如以下代码：
$color: #fff;
.my-class {
color: $colorr; //这里的变量名写错了，Sass 无法识别
}Sass 会提示以下错误信息：
Error: Undefined variable: "$colorr".
on line 4 of style.scss, in `my-class`我们可以通过修改变量名的方式来解决这个错误。
以上是常见的解决方案，如果还有其他的问题，请参考 Sass 官方文档或社区讨论。
总结
Sass 是一种非常强大的 CSS 预处理器，能够帮助开发者提高开发效率。然而，在使用 Sass 进行编译的过程中，有时也会遇到一些问题。本文从问题分析和解决方案两个方面，详细介绍了如何解决 “Invalid CSS on line…” 错误，希望能够帮助广大前端开发者更好地使用 Sass。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b23b50add4f0e0ffb6a3dc