What's the difference between SCSS and Sass?

css sass
bruno077 picture bruno077 · Apr 13, 2011 · Viewed 862k times · Source

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?

Answer

anon picture anon · Apr 13, 2011

Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself.

CSS variables are supported and can be utilized but not as well as pre-processor variables.

For the difference between SCSS and Sass, this text on the Sass documentation page should answer the question:

There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.

The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.

However, all this works only with the Sass pre-compiler which in the end creates CSS. It is not an extension to the CSS standard itself.

Related questions

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
:after and :before pseudo-element selectors in Sass

How can I use the :before and :after pseudo-element selectors following the syntax of Sass or, alternatively, SCSS? Like this: p margin: 2em auto > a color: red :before content: "" :after content: "* * *" Of course, the above fails.

Read More