SASS: next-level CSS?

With CSS, you can design your website exactly the way you want it. But the stylesheet language has its limits. Many web designers wish for a more comfortable way to work on website design. This is where CSS preprocessors come into play. With the help of a stylesheet language, which is an extension to the underlying CSS, design work can be made significantly easier. The most well-known of these extension languages is SASS. What exactly is the “Syntactically Awesome Style Sheet”?

To understand what SASS is and why you might need the language, you should first make sense of CSS. Websites are initially based on the markup language HTML. If you want to design in HTML, then you have to link the content directly to the design – on every single HTML page. Simply said, HTML is not intended for design, and so is severely limited in this area. Cascading style sheets (CSS) set the presentation of HTML pages. CSS sits on top of the HTML code, like a template, and defines the design for each element on the page: Font, font color, background – web designers can set all of these design elements with CSS.

For example, to set all headlines in 22pt Calibri, define this in the stylesheet where all guidelines for the appearance of your website are given. These rules are usually in a separate file, which the HTML pages then refer to. This enormously shortens the amount of information per page.

But CSS has its limits, which is especially clear if you’ve been working with the language for many years. The advantage of CSS is actually a disadvantage at the same time: the language is designed very simply. SASS makes it all a little more sophisticated, and greatly simplifies the work of creating a design.

All modern browsers can display CSS with no errors, but that’s not necessarily the case for SASS (which has been in use for over 10 years) or other extended stylesheet languages. For this reason, SASS is considered a preprocessor. The code in the SASS document is first converted to CSS before the source code, i.e. the website, is delivered to the system.

At first, there doesn’t seem to be any reason that SASS is necessary. After all, CSS has made it possible to develop attractively designed and technical pages for decades. Even if you want to work with SASS from here on out, you can’t avoid CSS. The old-fashioned stylesheet language will continue to stick around in the future as the foundation of the presentation. SASS and other languages simply build on the skeleton of CSS.

Of course, with SASS you have some options that aren’t offered by CSS alone:

• Variables: With SASS, you can save information in variables to be used again later. So it’s possible, for example, to centrally store a color value under a catchier variable.
• Mathematical functions: In SASS, you can also use mathematical operations like +, -, *, /, or %. This allows you to influence size specifications, for example.
• Functions: Other functions also make it easier to work on the design. These allow you to modify color values or analyze lists, among other things.
• Loops: Another advantage of SASS is the ability to set up loops. These are repeated until they reach a status defined by you.
• Case distinctions: These have a similar function to the conditional instructions “if” and “else.” The given commands are only run if specific conditions are met.
• Mixins: Mixins, simply said, are templates. You can either create them yourself or simply integrate them into your own code when using a framework.
• Indentations: The original SASS (as opposed to SCSS) works with indentations and line breaks to structure the code. You don’t need parentheses to display nesting or semicolons to mark line ends.
• Nesting: CSS doesn’t allow you to work with nesting in the code. SASS, though, gives users the option to present dependencies visually to reduce redundancies and simplify the writing process.
• Inheritances: It’s possible to inherit properties from one selector to another. This saves some writing effort and keeps the code slimmer.
• Partial files: To integrate code elements into a SASS file, you can also use partials. These are files that only have to contain a few lines of CSS and are imported into a SASS file by command.

Helpful frameworks and libraries already exist for SASS. Compass or Bourbon do a lot of the work for you when designing a website.

So that the created SASS code has the desired effect, you first have to convert it into ordinary CSS. The compilation functions very easily over the command line:

This command compiles the source code from your created example.sass file into a new CSS file. In doing so, the syntax of SASS is automatically modified to fit the rules of CSS. For example, inheritance is done away with and the syntax is adjusted.

Work on a website is rarely finished, and you could potentially make regular changes to the design. This is why SASS uses the “--watch" parameter to give you the option to monitor folders or files. If you make changes to them, then the system automatically recompiles them.

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.”

SASS brings a lot of benefits to the table, but the preprocessor still doesn’t convince everyone. The advantages are obvious: The preprocessor language gives users more possibilities when creating code. Many web designers, for example, love the function that allows you to store colors as variables instead of always having to enter the color value as a hexadecimal number. Mixins, variables, inheritance, and nesting do a better job than traditional CSS in ensuring that you follow the principle “Don’t repeat yourself.” This theory pushes for avoiding repetition in code and keeping source code slimmer. These changes also significantly reduce the effort required. Instead of having to make changes in multiple different places, you can just make one change at a central position.

The disadvantages of SASS apply to basically every preprocessor, and refer to the fact that the created code first has to be compiled. This adds another step to the development process. This makes the process a bit lengthier. Instead of being able to make modifications directly in the CSS file and see the effects immediately on the website, changes in the design first have to be translated into CSS. This allows errors to slip in and makes debugging more difficult.

Before using SASS – just like with any other unfamiliar technology – you need to take the time to learn the new language. In addition to CSS, which you should already know in any case, it’s simply another language to master.

In addition to SASS, LESS has also established itself in developer circles. This stylesheet language is strongly oriented around CSS and resembles SCSS in its syntax. Both preprocessors share some of the same properties: Both SASS and LESS allow for the use of mixins and variables. One difference, though, is that SASS is based on Ruby, while LESS uses JavaScript. But even this doesn’t give either of the preprocessors an advantage over the others.

The real differences are found instead in the logical functions: LESS gives users the opportunity to only activate mixins when specific situations occur. This is a helpful feature, but it represents the extent of logical links in LESS. SASS, on the other hand, offers loops and case distinctions as known from programming languages.

With SASS, users are free to choose between “indented syntax” or SCSS. Each developer can decide for themselves whether they would like to move away from the CSS rules or stay closer to the original. LESS doesn’t offer this choice. Here, users have to stick with the old rules. Code in LESS is automatically a superset of CSS: All source text formulated in CSS also functions in LESS – just like with SCSS.

SASS is much more popular among web designers. But this could be because SASS is a bit older. LESS was originally supported by the well-regarded frontend framework Bootstrap, which relied on the younger preprocessor. But with version 4, the project officially switched to SASS, which boosted the popularity of syntactically awesome style sheets even further.