Tag Info

Sass (Syntactically Awesome Stylesheets) is an extension of CSS adding features like nested rules, variables and mixins. This enables developers to write structured, manageable and reusable CSS. Sass is compiled into standard CSS.

Overview

Sass is a meta-language on top of css that’s used to describe 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.

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.

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.

Frameworks / Extensions

Compass4 is an extension of Sass which provides pre-defined cross-browser mixins and additional functionality like automated sprite-generation.