CSS has a lot of possibilities, but also a lot of limitations. Nowadays, JavaScript frameworks and libraries, ES6, and npm modules are widely used, and it is no longer convenient to use pure CSS.
Therefore, convenient languages have been created that compile to CSS. They are compiled by preprocessors, so such languages are called preprocessor languages.
Sass (Syntactically Awesome Style Sheets) is one of the most popular such tools. It adds features that are not yet available in CSS. These features make it easier to maintain websites and applications.
Sass doesn’t use curly brackets and semicolons, instead, it uses indents and newline characters. This is a Ruby-like syntax. This syntax makes Sass code shorter and easier to type.
In fact, the differences between Sass and SCSS boil down to three points:
- Sass uses indents instead of curly brackets to separate blocks;
- Sass uses a newline character instead of a semicolon to separate ads;
- Sass files have the .sass extension, and SCSS files have the .scss extension.
