SASS 编译时出现 “Error: Invalid CSS after "}": expected selector or at-rule, was "}"” 的解决方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，SASS 是一种优秀的 CSS 预处理语言，可以极大的提高 CSS 的编写效率。但是在编写 SASS 代码时，有时会出现错误提示，如 “Error: Invalid CSS after "}": expected selector or at-rule, was "}"”，这种错误提示可能会让初学者比较困惑。本文将为大家讲解这种错误的原因和解决方法。

错误原因

这种错误提示主要是由于 SASS 的语法错误引起的。具体来说，是因为在样式规则的末尾多了一个 “}” 的符号，而这个 “}” 符号并没有被正确的编译到样式规则中去。

例如，下面这段代码就会出现这种错误：

.box {
    width: 200px;
    height: 200px;
}

}

在这个例子中，“}” 符号多余了，没有正确地嵌套在样式规则中去，造成了编译错误。

解决方法

要解决这种错误，主要需要检查样式规则的嵌套结构是否正确。具体来说，有以下几种解决方法：

1. 检查样式规则的嵌套结构

可以通过在编辑器中格式化代码或者手动检查代码的缩进，确保样式规则的嵌套结构正确。例如上面的例子，可以将多余的 “}” 符号删除即可：

.box {
    width: 200px;
    height: 200px;
}

2. 使用 SASS 开发工具

使用 SASS 开发工具可以极大的减少错误的发生。SASS 开发工具可以帮助你自动生成正确的样式规则嵌套结构，使得代码更加规范和简洁。常见的 SASS 开发工具有 SASS 命令行工具和 SASS 插件。

3. 学习 SASS 语法规则

良好的编程习惯和对 SASS 语法规则的熟悉可以帮助我们避免错误的发生。因此，学习 SASS 语法规则对于编写优秀的 SASS 代码是非常重要的。可以参考 SASS 中文网学习 SASS 语法和嵌套规则。

示例代码

下面是一个 SASS 语法错误的例子：

// javascriptcn.com 代码示例
.box1 {
    width: 200px;
    height: 200px;
    .box2 {
        width: 100px;
        height: 100px;
    }

}}

可以看到，这个例子中，样式规则嵌套结构不正确，多出了一个 “}” 符号。通过手动检查或者使用 SASS 工具检查，我们可以轻松地找到这个错误，并将多余的 “}” 符号删除，将代码更正：

.box1 {
    width: 200px;
    height: 200px;
    .box2 {
        width: 100px;
        height: 100px;
    }
}

总结

编写 SASS 代码时，会遇到各种各样的错误提示。对这些错误进行正确的解决，有助于我们更好的开发项目和提升编码技能。本文主要介绍了 “Error: Invalid CSS after "}": expected selector or at-rule, was "}"” 这种错误的原因和解决方法，希望能够帮助到大家。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6528dd2d7d4982a6ebb69cb2