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

我想这是创建问题的锚标签,但我不明白为什么.从理论上说它应该有效.

Answer 1

你错过了一个分号:

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

Answer 2

虽然这不是这个特定问题的正确答案,但是由于遇到相同的错误消息("非法嵌套:只有属性可能嵌套在属性下面")而偶然发现本文的其他人可能会发现与使用相关的原因该scss_lint宝石.特别是,如果您已升级scss-lint到scss_lint,则可能需要添加require: false到Gemfile以使其重新运行.

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

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