Sass

This item was not updated in last three versions of the Radar. Should it have appeared in one of the more recent editions, there is a good chance it remains pertinent. However, if the item dates back further, its relevance may have diminished and our current evaluation could vary. Regrettably, our capacity to consistently revisit items from past Radar editions is limited.

Mar 2022

Hold

Since the heydays of Sass, the requirements for styling solutions have changed.

With modern solutions like CSS-in-JS, Tailwind or PostCSS, you get scoped CSS out of the box and can get rid of the manual and therefore error-prone BEM methodology. Furthermore, mapping class names to elements is no longer necessary.

In general the modern solutions bring a better and more robust developer experience. Therefore, we put Sass on hold.

Mar 2017

Adopt

Sass (Syntactically Awesome Style-Sheets) is an extension to native CSS, which, as a preprocessor, simplifies the generation of CSS by offering features that enable developers to more efficiently write robust, better readable and maintainable CSS.

Core features of Sass are:

Nesting of rules: CSS rules can be indented, reducing redundancy of selectors and increasing readability due to shorter selectors.
Use of variables: Commonly-used values such as colors can be stored in variables
Mixins: Often-used CSS blocks can be referenced by using mixins, which work like functions
Extends: CSS properties can be inherited
Sass files can be split into modules, which leads to smaller files and better file structures
Operators: Simple math calculations can be applied to CSS properties
Easily to integrate in nodejs-environments and build tools such as npm, Gulp and Grunt.

Sass has been widely adopted for many years and has evolved to an industry-standard backed by an active community since 2006.

The learning curve is very smooth as Sass is fully compatible to CSS, meaning that all features are optional: Starting with Sass is as easy as renaming .css-files to .scss in a first step and then refactoring it step-by-step with the use of Sass features.

At AOE, Sass has been recommended by the frontend COI and is used in nearly every current project.

More information: