Sass Invalid CSS Error: "expected expression"

css sass
Tom R picture Tom R · Oct 12, 2011 · Viewed 57.2k times · Source

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

meagar picture meagar · Oct 12, 2011

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.

Related questions

What's the difference between SCSS and Sass?

From what I've been reading, Sass is a language that makes CSS more powerful with variable and math support. What's the difference with SCSS? Is it supposed to be the same language? Similar? Different?

Read More
Sass Variable in CSS calc() function

I'm trying to use the calc() function in a Sass stylesheet, but I'm having some issues. Here's my code: $body_padding: 50px body padding-top: $body_padding height: calc(100% - $body_padding) If I use the literal 50px instead of my …

Read More
Import regular CSS file in SCSS file?

Is there anyway to import a regular CSS file with Sass's @import command? While I'm not using all of the SCSS syntax from sass, I do still enjoy it's combining/compressing features, and would like to be able to use …

Read More