Sass (Syntactically Awesome Style Sheets) is an extension of CSS adding features like nested rules, variables, mixins and class extensions. This enables developers to write structured, manageable and reusable CSS. Sass is compiled into standard CSS. It is primarily a CSS pre-processor language that accepts both the CSS and its personalised syntax of writing visual design codes.
Overview:
Sass is a meta-language on top of css that describes the style of a document cleanly and structurally, with more power than flat CSS allows.
Sass is an extension of css3 written in ruby. It adds nested rules, variables, mixins, selector inheritance, and useful functions like color manipulation or conditional statements2. It's translated to well-formatted, standard CSS using the command-line tool or a web-framework plugin.
It is the only language that can store design tokens (e.g. colors, font sizes, spacing) and use the value types9 natively; i.e. numbers, colors, strings, lists, and booleans.
Sass has two syntaxes:
- SCSS (Sassy CSS): As of Sass3, this is the main syntax. It is a superset of CSS3, so all valid CSS files are also valid SCSS. Files with this syntax have the extension
.scss.
Example SCSS:
$margin: 12px;
li {
.border {
margin: $margin / 2;
}
}
- SASS: The indented syntax. Instead of braces and semicolons, it uses line indentation to specify blocks (similar to Ruby's syntax). Files with this syntax have the extension
.sass.
Example SASS:
$margin: 12px
li
.border
margin: $margin / 2
Frameworks / Extensions:
- compass4 is an extension of Sass which provides pre-defined cross-browser mixins and additional functionality like automated sprite-generation.
- bourbon5 is a simple and lightweight mixin library for Sass.
Flavors:
- Ruby Sass1 is the original Ruby-based version of Sass.
- LibSass6 is C/C++ port of the Sass precompiler. It compiles very quickly, can be embedded in other languages and binaries, and aims for feature parity with the original Ruby Sass.
- Node Sass7 uses LibSass to compile .scss files using Node.
