What's the Key Difference Between Sass and SCSS Syntax?

What's the Distinction between SCSS and Sass?

You've learned that Sass enhances CSS by adding variable and mathematical functionality. However, what sets Sass apart from SCSS?

Sass and its Syntax

Sass is a CSS pre-processor that introduces syntactic improvements. Style sheets written in this extended syntax are processed by Sass and transformed into standard CSS style sheets. However, Sass does not augment the CSS standard itself.

SCSS vs. Sass: Unveiling the Differences

According to the Sass documentation:

SCSS Syntax:

• Utilizes the file extension .scss
• Superset of CSS, allowing all valid CSS to be valid in SCSS
• Familiar and popular due to its resemblance to CSS

Indented Sass Syntax:

• Original Sass syntax with the file extension .sass
• Often referred to as "Sass"
• Supports the same features as SCSS but employs indentation instead of curly braces and semicolons for formatting

Important Note:

Both SCSS and Sass rely on the Sass pre-compiler to generate CSS. They do not directly extend the CSS standard.

The above is the detailed content of What's the Key Difference Between Sass and SCSS Syntax?. For more information, please follow other related articles on the PHP Chinese website!