这个Sass错误是什么意思？“非法嵌套：只有属性可以嵌套在属性下方。”

Question

这是我的代码

html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}

body {
font-family: 'Open Sans';
}

.navigation {
padding: 0;
margin: 0;
background: #333;
position: fixed;
top: 0;
z-index: 999;
width: 100%
li {
    display: inline;
    padding: 5px 10px;
    a {
        color: #e1e1e1;
        text-decoration: none;
        a:hover{color: lighten(#e1e1e1, 20%);}
        }
    }
}

但是每当我构建它并刷新网页时，就会出现这个错误：

Syntax error: Illegal nesting: Only properties may be nested beneath properties.
        on line 23 of style.scss

这是我的带行号的CSS代码

18:     z-index: 999;
19:     width: 100%
20:     li {
21:         display: inline;
22:         padding: 5px 10px;
23:         a {
24:             color: #e1e1e1;
25:             text-decoration: none;
26:             a:hover{color: lighten(#e1e1e1, 20%);}
27:         }
28:     }

我猜测是锚标签造成了问题，但我不理解为什么。理论上应该可以工作。

- IlangoRajagopal

---

我建议在第19行的末尾添加分号。看起来编译器认为你正在尝试使用这种语法：http://mrhaki.blogspot.com/2013/02/sass-snippets-compact-syntax-for-nested.html - Sam Dufel

另外，我认为您可能想在第26行使用&:hover而不是a:hover，因为看起来您想要针对相同的父级 - a标签。 - vivekagr

谢谢回答。现在它可以工作了。但是我不明白为什么它会在第23行显示错误，而不是第20行？ - IlangoRajagopal

请注意关闭投票者：虽然这可能被解释为“排版错误”，但它并不是一个明显的错误：在CSS中，尾随的分号是可选的。 - cimmanon

Answer 1

您缺少一个分号：

.navigation {
  padding: 0;
  margin: 0;
  background: #333;
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;   <=== right here

- RantriX

Answer 2

尽管这不是这个具体问题的正确答案，但是那些因为遇到相同的错误信息（“Illegal nesting: Only properties may be nested beneath properties.”）而偶然发现本文的人可能会发现原因与使用scss_lint宝石有关。特别是，如果您已经从scss-lint升级到scss_lint，则可能需要在Gemfile中添加require: false才能使其正常工作。

参考资料：https://github.com/brigade/scss-lint/issues/496 文档：https://github.com/brigade/scss-lint#installation

- stevo

---

非常感谢你，Stevo。这帮了我大忙 :)。 - voltair

谢谢，这让我省去了在超过1000行CSS中寻找问题的时间 :) - aldrien.h

Answer 3

我遇到了同样的错误，上面的选项都没有起作用 :/ 我以为 "require: false" 会起作用，但它没有。 对我有用的是在 Atom 中安装 linter-scss 插件。 安装后，我再次编译，它就起作用了。 希望这对你们也有用。 问候，Bernardo。

- Bernardo Troncoso

Answer 4

像stevo的答案一样，这对于特定的问题并不重要，但我有另一个原因可以解释为什么你会看到这个错误：空格。

某种程度上，我有一行是用tab缩进而不是空格。这完全让SASS困惑了。如果你看到这个错误，请查看你的空白字符。

- Shane

Answer 5

当您在 SASS 中使用空格并且编译器遇到制表符时，也可能出现此错误。

当您复制粘贴一些代码时，如果您的编辑器不将这些制表符转换为空格，就很容易发生这种情况。

- Zini