What's the difference between SCSS and Sass?

The Sass .sass file is visually different from .scss file, e.g.

Example.sass - sass is the older syntax

$color: red



=my-border($color)

  border: 1px solid $color



body

  background: $color

  +my-border(green)

Example.scss - sassy css is the new syntax as of Sass 3

$color: red;



@mixin my-border($color) {

  border: 1px solid $color;

}



body {

  background: $color;

  @include my-border(green);

}

Any valid CSS document can be converted to Sassy CSS (SCSS) simply by changing the extension from .css to .scss.

4 years ago

The difference is syntax. Underneath the textual exterior, they are identical. This is why sass and scss files can import each other. Actually, Sass has four syntax parsers: scss, sass, CSS, and less. All of these convert a different syntax into an Abstract Syntax Tree which is further processed into CSS output or even onto one of the other formats via the sass-convert tool.

Use the syntax you like the best, both are fully supported and you can change between them later if you change your mind.

4 years ago

Sass was the first one, and the syntax is a bit different. For example, including a mixin:

Sass: +mixinname()

Scss: @include mixinname()

Sass ignores curly brackets and semicolons and lay on nesting, which I found more useful.

4 years ago