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 makes 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 of 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 the = 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 a valid SCSS as well.
• More syntax constraints
• Uses Braces {}
• Uses Semicolons ;
• File extension is .scss
• To create mixin it uses the @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;
}

---

Wrapping up!

That's all for this article, hope you learned something. Thanks for reading, catch you later.

You can also buy me a coffee that would help me grow as a frontend developer :)