Everyone uses SASS now

SASS: CSS at the next level?

There is not just one syntax in which you can use SASS, but two: First, you have the original form, which like "indented syntax"(" Indented syntax ") or simply" SASS "is called. There is also a newer variant that is more closely based on the requirements of CSS and which is therefore available Sassy CSS (SCSS) calls - so CSS in the style of SASS. Version 3 of SASS established SCSS as the official syntax. The biggest difference: the use of brackets and semicolons.

The original SASS syntax works with Indentations and line breaks, an approach based on the model of YAML. To complete a line of code, it is sufficient to make a line break - that is, to press the Enter key. Indentations work very easily using the tab. By changing the position in the typeface, groups are formed - so-called declaration blocks. This is not possible with CSS itself. Here curly brackets must be used for the groupings and semicolons for the property declarations. And that's exactly what SCSS needs.

So it becomes a War of faith: Some users swear by the simple handling of the original SASS, which means that you don't have to pay attention to the correct setting of brackets when moving source text snippets and generally generates a leaner, clearer code. Overall, the "indented syntax" means fewer characters and lines. The supporters of SCSS, on the other hand, are happy to accept the additional effort, because it is more similar to what is already known from CSS.

SCSS is one Superset to CSS, and that ensures that CSS code also works in SCSS - but not the other way around. The functions of SASS are still fully included. This makes it easier to work with both languages ​​at the same time. In addition, the changeover is much easier for people who are already working with CSS and are used to the syntax. SASS supports both syntaxes, but you have to make a decision for each project: In order to be able to differentiate between the different formats, the files are given either the file extension .sat or .scss.