Sass Invalid CSS Error: “expected expression”

Question

I've just been following the Sass tutorial. For some reason though the Sass file is not correctly generating the css. The terminal says the css is invalid but I'm pretty sure it's not. I've tried changing it too just in case there was a problem...

What have I done wrong?

Sass Version: Sass 3.1.10

Error message:

error sass/test.sass (Line 3: Invalid CSS after "80%": 
expected expression (e.g. 1px, bold), was ";")

.sass file contents:

/* style.scss */
#navbar {
  width: 80%;
  height: 23px;
}

Answer 1

Based on your error message (error sass/test.sass) I can tell you're using the .sass extension for a Scss file. Change your file name to style.scss.

Sass and Scss use two different and incompatible syntaxes.

Answer 2

Try this:

/* style.scss */
#navbar {
    width: 80%;
    height: 23px;
}

/* style.sass */
#navbar 
    width: 80%
    height: 23px