Stylesheet Types : CSS, SaSS, SCSS - What do they mean

Ever wondered what is the difference between SCSS and Sass. More importantly, how are they different from CSS.

To start with let me point out that Sass is a language or a pre-processor that makes CSS more powerful with variable and math support. It provides 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. You can do operations like additions and introduce variables in CSS using Sass.


The SCSS is also called Sassy CSS. This is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file. Files using this syntax have the .scss extension.


The Saas format described earlier is also known as the indented syntax. It 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, as already told that all this works only with the Sass pre-compiler. In the end what is created is simple CSS. It is not an extension to the CSS standard itself.

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.