sass SCSS vs Sass Main Differences
Example
Although people often say Sass as the name of this CSS-preprocessor, they often mean the SCSS-syntax. Sass uses the .sass file extension, while SCSS-Sass uses the .scss extension. They are both referred to as "Sass".
Speaking generally, the SCSS-syntax is more commonly used. SCSS looks like regular CSS with more capabilities, whereas Sass looks quite different to regular CSS. Both syntaxes have the same abilities.
Syntax
The main differences are that Sass doesn't use curly brackets or semicolons, where SCSS does. Sass is also whitespace-sensitive, meaning you have to indent correctly. In SCSS, you can format and indent your rules as you please.
SCSS:
// nesting in SCSS
.parent {
margin-top: 1rem;
.child {
float: left;
background: blue;
}
}
SASS:
// nesting in Sass
.parent
margin-top: 1rem
.child
float: left
background: blue
After compilation, both will produce the same following CSS:
.parent {
margin-top: 1rem;
}
.parent .child {
float: left;
background: blue;
}
