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:     }

我猜它是造成问题的锚标记，但我不明白为什么。理论上它应该有用。

Answer 1

你错过了一个分号：

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

Answer 2

虽然这不是这个特定问题的正确答案，但其他人因为遇到相同的错误信息而偶然发现了这篇文章（＆＃34;非法嵌套：只有属性可以嵌套在属性下面。＆＃34 ;）可能会找到与使用scss_lint gem相关的原因。特别是，如果您已从scss-lint升级到scss_lint，则可能需要将require: false添加到Gemfile中以使其重新运行。

参考：https://github.com/brigade/scss-lint/issues/496

文档：https://github.com/brigade/scss-lint#installation

Answer 3

就像stevo的答案一样，这对于具体问题无关紧要，但我还有另一个原因可能会出现这样的错误：空白。

不知何故，我有一条线是缩进而不是空格。这完全混淆了SASS。如果您看到此错误，请查看您的空白字符。

Answer 4

我遇到了相同的错误，以上选项均无效：/ 我以为“ require：false”会起作用，但没有。它为我工作的是为Atom安装linter-scss插件。安装后，我再次编译即可。我希望它也对你们有用。此致，贝尔纳多。

Answer 5

当您在SASS中使用空格并且编译器遇到制表时，也会发生此错误。

当您复制粘贴某些代码并且您的编辑器未将这些选项卡转换为空格时，很容易发生这种情况。

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

5 个答案: