Difference b/w SASS & SCSS

SASS (Syntactically Awesome Style Sheets) is a pre-processor scripting language that is compiled or interpreted into CSS. It has syntax advancements. The use of math and variable support make CSS more powerful.

SASS has two syntaxes:

• Newer: SCSS (Sassy Cascaded Style Sheets)
• Older: Original SASS (Syntactically Awesome Style Sheets)

So they are both the SASS pre-processors with two different possible syntaxes. 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.

Original SASS

• SASS is the older css pre-processor with indented syntax.
• It has syntax similar to Ruby.
• Lesser syntax constraints
• No Braces {}
• Follows Strict Indentation
• No Semicolons ;
• File extension is .sass
• To create mixin it uses = sign
• To use mixin it precedes with the + sign
• Greater designer and developer community

SCSS

• SCSS is a superset of CSS3 syntax.
• SCSS has syntax similar to CSS.
• Every valid CSS3 stylesheet is valid SCSS as well.
• More syntax constraints
• Uses Braces {}
• Uses Semicolons ;
• File extension is .scss
• To create mixin it uses @mixin directive
• To use mixin it precedes with the @include directive
• Smaller designer and developer community

SASS Example

$prim-color: red

=my-border($sec-color)
  border: 1px solid $sec-color

body
  background: $prim-color
  +my-border(green)

p
  color: $prim-color

SCSS Example

$prim-color: red;

@mixin my-border($sec-color) {
  border: 1px solid $sec-color;
}

body {
  background: $prim-color;
  @include my-border(green);
}

p {
  color: $prim-color;
}

Output CSS

body {
  background: red;
  border: 1px solid green;
}

p {
  color: red;
}

Moazam AliFollow

Frontend Developer who is always passionate in discovering new stuff and building networks.