SASS 编译出错：“Invalid CSS after "nav {": expected selector or at-rule, was "" 该如何解决？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，使用 SASS 作为 CSS 预处理器已经很常见了。它能够帮助我们快速编写可维护、可复用的样式代码。但是，在使用 SASS 编译时，有时候会遇到一些错误信息。其中比较常见的一种错误是：“Invalid CSS after "nav {": expected selector or at-rule, was ""。”在本文中，我们将探讨这个错误的原因和解决方法。

问题分析

首先，让我们来看看这个错误提示的具体内容。它告诉我们在 “nav {” 后面出现了一个非法字符，而我们期望的是一个选择器或规则集。这意味着在 SASS 文件中，nav 下面应该是一个选择器或规则集，而不是空白字符或其他不合法字符。

例如，以下是一个错误的 SASS 代码示例：

nav {
  
}

这段代码中，nav 下面没有任何选择器或规则集，导致编译出现错误。

那么，如何解决这个问题呢？

解决方法

1. 检查 SASS 代码中 nav 下面的选择器或规则集是否存在

这是最基本的一个解决方法，也是最常见的错误原因。请确保在 nav 下方存在一个选择器或规则集。例如：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

上面这段代码就是一个有效的 SASS 代码示例，其中 nav 下面包含了一个 ul 选择器。

2. 检查 SASS 代码的层级是否正确

除了 nav 下面是否存在选择器或规则集外，还需要检查 SASS 代码的层级是否正确。在 SASS 中，层级关系非常重要，一个选择器或规则集的位置如果不正确，也会导致编译出错。例如，以下是一个错误的 SASS 代码示例：

// javascriptcn.com 代码示例
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

li {
  float: left;
}

这段代码中，li 的位置不正确，它应该被包含在 nav 下面的 ul 选择器中，而不是作为一个独立的规则集存在。

正确的代码应该是这样的：

// javascriptcn.com 代码示例
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      float: left;
    }
  }
}

3. 检查 SASS 代码中是否有语法错误

SASS 代码中的语法错误也会导致编译错误，导致出现“Invalid CSS after "nav {": expected selector or at-rule, was ""”这样的错误提示。因此，我们需要检查一下 SASS 代码是否存在语法错误。可以使用在线工具或本地编译器进行检查。例如，我们可以使用 sass-lint 工具来检查 SASS 代码是否符合语法规范。

// javascriptcn.com 代码示例
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      float: left
    }
  }
}

这段代码中，缺少分号，造成了语法错误。

总结

在使用 SASS 编译器时，如果遇到“Invalid CSS after "nav {": expected selector or at-rule, was ""”这样的错误提示，我们需要意识到这是一个选择器或规则集位置不正确的问题。为了解决这个问题，我们需要检查一下 SASS 代码是否存在选择器或规则集，并检查代码的层级是否正确。如果查找这些问题无法解决编译错误，我们可以检查一下 SASS 代码中是否存在语法错误。

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