Community Documentation

Working with Sass & Compass

Last updated June 28, 2012. Created by KrisBulman on June 28, 2012.
Log in to edit this page.

Aether utilizes a Sass & Compass; here are just a few of the reasons why:

  • Grid math
  • Functions
  • Mixins
  • Configurable variables
  • Vendor prefix support
  • Legacy browser support
  • Stylesheet maintenance
  • Code maintenance
  • and more...

Many people are intimidated by preprocessors, or feel they aren't necessary for such a simple language, but I think that's the wrong perspective. CSS is a poorly constructed language, and Sass brings it where it needs to be by introducing so many good things. At the age of responsive design, it becomes a necessity to use something better, for Aether, it is Sass & Compass.

Sass

Sass is an extension of CSS3. It has two syntaxes, "Sass" and "SCSS"; Aether uses "SCSS", the main syntax, which is a superset of CSS3 and therefore closely resembles it. Sass adds functionality such as nested rules, variables, mixins, selector inheritance, and more.

Compass

Compass is a CSS authoring framework that uses Sass. Compass contains many of the web's best re-usable patterns, adds vendor prefixes so you don't have to think about them, handles vertical rhythm, and more.

See the Sass & Compass Resources section for more reference material.