Compass Integration

You'll need to install the pre-release version of StaticMatic to use this feature: gem install staticmatic --pre

• What is Compass?
• Using Compass with StaticMatic
• Using Compass's CSS Frameworks

What is Compass?

Compass is simply awesome. It gives you a access huge amount of stylesheet libraries that take much of the duplication out of authoring stylesheets.

Check out the code for adding borders to a box:

.box {
  @include border-radius(5px)
}

This compiles to:

.box {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

Compass also comes with a port of the popular Blueprint CSS framework and has many plugin frameworks such as Susy & 960.gs.

Using Compass with StaticMatic

StaticMatic works with Compass out of the box. You can start using all the great features Compass provides (read about Compass's core framework here).

It's also simple to customize the way Compass work. When you setup your project, you'll have a file called config/compass.rb. You can use this file to configure Compass:

output_style = :compressed

For a run down of what you can configure in config/compass.rb, see The Compass Configuration Reference

Using Compass's CSS Frameworks

Compass's command line tool can generate CSS framework base files for you. This works seemlessly with StaticMatic.

For example, if you'd like to use the Blueprint framework for your project simply run:

> compass install blueprint

in your project directory. Compass will then install all of the base stylesheets you need to get started.

Read more about Compass's command line tool here.