30 lines
1.8 KiB
Markdown
30 lines
1.8 KiB
Markdown
---
|
|
title: "Sass"
|
|
ring: adopt
|
|
quadrant: languages-and-frameworks
|
|
---
|
|
|
|
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](/tools/npm.html), [Gulp](/tools/gulp.html) and [Grunt](/tools/grunt.html).
|
|
|
|
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:
|
|
|
|
* [Sass Language](http://sass-lang.com/)
|
|
* [SassDoc](http://sassdoc.com/)
|
|
* [Improving Sass code quality on](https://www.theguardian.com/info/developer-blog/2014/may/13/improving-sass-code-quality-on-theguardiancom) [theguardian.com](http://theguardian.com) |