CODEWITHSUNDEEP
csssass
HungryHobo
HungryHobo

Reputation: 75

Invalid CSS in Sass

Whenever I try to compile Sass code to CSS with either the terminal or the program Koala I get this error message: 

Error: Invalid CSS after "body ": expected selector, was "{" 
       on line 5 of style.sass
  Use --trace for backtrace

Here's the piece of code the error seems to be referring to:

body {
  background {
    color: $background-color
  }
}

How can I fix my code to make it compile correctly?

Upvotes: 1

Views: 1685

Answers (4)

elahe karami
elahe karami

Reputation: 693

background must be class name or id or simply background css property.

body {
  .background {
    color: $background-color;
  }
}

body {
  #background {
    color: $background-color;
  }
}

body {
  background : $background-color;
}

Upvotes: 0

Brandon Dyer
Brandon Dyer

Reputation: 1386

Sass, unlike Scss, uses indentation instead of curly braces.

body {
    background {
        color: $background-color;
    }
}

becomes

body
    background
        color: $background-color

Though, I'm quite sure you mean to have background as a property instead of a selector.

body
    background-color: $background-color

Upvotes: 0

Martijn Broere
Martijn Broere

Reputation: 11

You cloud try adding a colon after background.

body {
  background: {
    color: $background-color;
  }
}

Upvotes: 0

Alexander Nied
Alexander Nied

Reputation: 13678

The way your selector reads is that it is looking for the <body> element, and then a <background> element (which isn't a thing that exists in HTML, to my knowledge), and then you are setting the text inside that element to the color in your var $background-color. I think either one of two things:

Either you meant for background to be a class or id, like .background, in which case your code becomes:

body {
  .background {
    color: $background-color;
  }
}

Or, more likely, you are very tired and just got your wires crossed, and mean to be setting the background-color property like this:

body {
  background-color: $background-color;
}

Please note that you were also missing an ending semi-colon, which I added.

Upvotes: 1

Related Questions