在前端开发中，SASS 是一种优秀的 CSS 预处理语言，可以极大的提高 CSS 的编写效率。但是在编写 SASS 代码时，有时会出现错误提示，如 “Error: Invalid CSS after "}": expected selector or at-rule, was "}"”，这种错误提示可能会让初学者比较困惑。本文将为大家讲解这种错误的原因和解决方法。
错误原因
这种错误提示主要是由于 SASS 的语法错误引起的。具体来说，是因为在样式规则的末尾多了一个 “}” 的符号，而这个 “}” 符号并没有被正确的编译到样式规则中去。
例如，下面这段代码就会出现这种错误：
---- -
------ ------
------- ------
-
-在这个例子中，“}” 符号多余了，没有正确地嵌套在样式规则中去，造成了编译错误。
解决方法
要解决这种错误，主要需要检查样式规则的嵌套结构是否正确。具体来说，有以下几种解决方法：
1. 检查样式规则的嵌套结构
可以通过在编辑器中格式化代码或者手动检查代码的缩进，确保样式规则的嵌套结构正确。例如上面的例子，可以将多余的 “}” 符号删除即可：
---- -
------ ------
------- ------
-2. 使用 SASS 开发工具
使用 SASS 开发工具可以极大的减少错误的发生。SASS 开发工具可以帮助你自动生成正确的样式规则嵌套结构，使得代码更加规范和简洁。常见的 SASS 开发工具有 SASS 命令行工具 和 SASS 插件。
3. 学习 SASS 语法规则
良好的编程习惯和对 SASS 语法规则的熟悉可以帮助我们避免错误的发生。因此，学习 SASS 语法规则对于编写优秀的 SASS 代码是非常重要的。可以参考 SASS 中文网 学习 SASS 语法和嵌套规则。
示例代码
下面是一个 SASS 语法错误的例子：
----- -
------ ------
------- ------
----- -
------ ------
------- ------
-
--可以看到，这个例子中，样式规则嵌套结构不正确，多出了一个 “}” 符号。通过手动检查或者使用 SASS 工具检查，我们可以轻松地找到这个错误，并将多余的 “}” 符号删除，将代码更正：
----- -
------ ------
------- ------
----- -
------ ------
------- ------
-
-总结
编写 SASS 代码时，会遇到各种各样的错误提示。对这些错误进行正确的解决，有助于我们更好的开发项目和提升编码技能。本文主要介绍了 “Error: Invalid CSS after "}": expected selector or at-rule, was "}"” 这种错误的原因和解决方法，希望能够帮助到大家。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6528dd2d7d4982a6ebb69cb2