Sass
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.
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: