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

Question

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.

Answer 1

You're missing a semicolon:

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

Answer 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