There’s not only one syntax that you can use SASS in, but two: One has the original form, which is usually referred to as “indented syntax” or simply “SASS” for short. But there is also a new variant, which is more strongly oriented to the standards of CSS and so is called sassy CSS (SCSS) – so, SASS-style CSS. Version 3 of SASS has SCSS as an official syntax. The biggest difference: the use of parentheses and semicolons.
The original SASS syntax works with indents and line breaks, a process adapted from YAML. To finish a line of code, it’s sufficient to insert a line break – so press the enter key. Indents function simply using the tab button. Groupings, called declaration blocks, are formed by changing the position in the typeface. This isn’t possible with CSS itself. Here, you have to use parentheses for the groupings and semicolons for the property declarations. This is exactly what’s necessary for SCSS.
The variations command fierce loyalty: Some users swear by the simple handling of the original SASS, where you don’t have to pay attention to the correct positioning of the parentheses when moving snippets of source code and can generally create slimmer, clearer code. You end up with fewer characters and lines overall as a result of the “indented syntax.” The SCSS enthusiasts, on the other hand, are happy to take the additional effort in stride, because it’s more similar to what you already know from using CSS.
SCSS is a superset of CSS, which guarantees that the CSS code fundamentally works in SCSS as well – but not the other way around. The functions of SASS are still fully contained, though. This makes it easier to work with both languages at the same time. In addition, people who already work with CSS and are comfortable with the syntax have a much easier time switching over. Even though SASS supports both syntaxes, you still have to decide for each project: to be able to distinguish between the different formats, give the files either the file ending “.sass” or “.scss.”