Difference b/w SASS & SCSS
Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets.
Table of contents
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 :)