Let's Get SASSy:
Fast Styling with Compass

What is SASS?

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

/* Variables */
  $blue: #3bbfce;
  $margin: 16px;

  .content-navigation {
    border-color: $blue;
    color:
      darken($blue, 9%);
  }

/* Mixins */
  @mixin table-base {
    th {
      text-align: center;
      font-weight: bold;
    }
    td, th {padding: 2px}
  }

  #data {
    @include table-base;
  }

/* Nesting */
  li {
    font: {
      family: serif;
      weight: bold;
      size: 1.2em;
    }
  }

What is Compass?

Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy.

/* Compass: */
  .simple { @include border-radius(4px, 4px); }

  /* Generated CSS: */
  .simple {
    -webkit-border-radius: 4px 4px;
    -moz-border-radius: 4px / 4px;
    -o-border-radius: 4px / 4px;
    -ms-border-radius: 4px / 4px;
    -khtml-border-radius: 4px / 4px;
    border-radius: 4px / 4px;
  }

Install, Play

http://compass-style.org/install/

Compass runs on any computer that has ruby installed.

$ gem install compass
  $ compass create /path/to/project
  $ cd /path/to/project
  $ compass watch