CODEWITHSUNDEEP
cssrubysass
IlangoRajagopal
IlangoRajagopal

Reputation: 73

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.

Upvotes: 6

Views: 12341

Answers (5)

Zini
Zini

Reputation: 63

This error can also arise when you use spaces in your SASS and the compiler encounters a tabulation.

It can easily happen when you copy-paste some code and your editor does not convert those tabs into spaces.

Upvotes: 0

Bernardo Troncoso
Bernardo Troncoso

Reputation: 197

I ran into the same error and none of the options above worked :/ I thought the "require: false" was going to work but it didn't. What it worked for me was installing the linter-scss plugin for Atom. After I installed, I compiled again and it worked. I hope it works for you too guys. Regards, Bernardo.

Upvotes: 1

Shane
Shane

Reputation: 1075

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.

Upvotes: 1

stevo
stevo

Reputation: 468

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

Upvotes: 10

RantriX
RantriX

Reputation: 1027

You're missing a semicolon:

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

Upvotes: 21

Related Questions