Sass+Compass

Sass+Compass are super powerful tools for writing CSS, and they are made even more powerful with the Compass extensions that come bundled with Aurora. Before diving in to the power available to you, you should know how to compile your Sass files. From the command line, inside your theme folder, from the same place where the config.rb file lives, type the following to have Compass start watching your Sass files for changes and recompiling them:

bundle exec compass compile

We use bundle exec to ensure that we are compiling our Sass with the correct versions of our gems as discussed in the subthemes section of the site.

Compass Extensions

Compass extensions are similar to Drupal modules, allowing users to tap into the Sass front end community and use what others have made to make your life easier! Aurora comes bundled with a handful of what we believe are very useful and powerful Compass extensions that all share a similar approach to their development and are made available for you use out of the box. Besides searching, there are two good resources for finding Compass extensions: the Compass Wiki,a wiki list open for anyone to edit and add extensions to, or Team Sass, a curated set of high quality extensions. Many of the extensions available with Aurora out of the box come from Team Sass.

There are 6 Compass extensions that come with Aurora, broken into four categories: Grids, Media Queries, Design, and Miscellaneous. Each one is imported individually, so if you would prefer not to use a given extension or would prefer to use a different one, simply remove it and install the one you'd like to use. Be sure to update your Gemfile and re-install your bundle if you do.

They are Breakpoint, Singularity, Color Schemer, Toolkit, Sassy Buttons, and Compass Normalize.

Grids

The grid system that ships with Aurora is Singularity. From Singularity's description: "Singularity is a next generation grid framework built from the ground up to be responsive. What makes Singularity different? Well, a lot of things. Singularity is based on internal ratios instead of context based which allows for better gutter consistency across breakpoints. Ratio based math also allows for non-uniform grids in any unit you want to use."

Media Queries

While you can write Media Queries by hand, Aurora ships with Breakpoint which makes writing your media queries super simple. From Breakpoint's description: "Breakpoint makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the breakpoint mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself, to handling cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best."

Design

Aurora ships with two extensions to assist in design, Color Schemer and Sassy Buttons.

From Color Schemer's description: "Color schemer is a robust color toolset for Sass. It expands on the existing Sass color functions and adds things like RYB manipulation, set-hue, set-lightness, tint, shade and more. It also leverages these tools adding a full-featured color scheming tool that allows you to set one primary color and create whole color schemes around it."

From Sassy Button's description: "Want that fancy CSS3 button look with none of the work? Then Sassy Buttons are for you! Easily create great looking, cross-browser compatible buttons with just a few lines of Sass and you'll be in button heaven in no time."

Miscellaneous

Aurora also ships with two extensions that do some varied things. The two are Toolkit and Compass Normalize.

From Toolkit's description: "Think of Toolkit as your swiss army knife for Progressive Enhancement and Responsive Web Design. Those little bits and bobs that make your life easy and you want to reuse throughout projects but never really had a place to put? They're here, and they're designed to make your life happy."

From Compass Normalize's description: "This simple plugin for Compass enables you to use normalize.css in your stylesheets without having to download it."