What does this error in Sass mean? “Illegal nesting: Only properties may be nested beneath properties.”

问题:

This is my code

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%);}         }     } } 

But whenever I build it and refresh the webpage I get this error:

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

here is the my css code with line numbers

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

I guess it's the anchor tag that's creating the problem but I don't understand why. Theoretically it should work.

回答1:

You're missing a semicolon:

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

回答2:

Although this isn't the correct answer for this specific question, others who stumble upon this article because they encounter the same error message ("Illegal nesting: Only properties may be nested beneath properties.") may find the cause to be related to using the scss_lint gem. In particular, if you've upgraded from scss-lint to scss_lint, you may need to add require: false to your Gemfile to get things working again.

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

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

回答3:

Like stevo's answer, this doesn't matter for the specific question, but I have another reason why you may see this error: whitespace.

Somehow, I had a single line which was tab indented rather than spaces. This totally confused SASS. If you're seeing this error, take a look at your whitespace characters.

文章来源: What does this error in Sass mean? “Illegal nesting: Only properties may be nested beneath properties.”