Lars Høg's Compass Notes

Compass

Compass is a meta-framework combining Sass with either BlueprintCSS, Yahoo!UI grids or 960gs using mixins

First we create a Rails app...

$ rvm use 1.9.2@compass_demo
$ gem install rails
$ rails new compass_demo
$ cd compass_demo/

Add Compass with 960gs to the Rails project

We need to add a gem or two to Gemfile:

  gem 'compass'
  gem 'compass-960-plugin'

$ bundle check
$ bundle install

Install compass with 960gs and paths specified:

$ bundle exec compass init rails . -r ninesixty --using 960 --css-dir=public/stylesheets/compiled --sass-dir=app/stylesheets

Create a application sass file to hold our own styling $ touch app/stylesheets/app.sass

And add the css files to head section of layout:

  <%= stylesheet_link_tag 'compiled/grid.css', 'compiled/text.css', :media => 'screen, projection' %>
  <%= stylesheet_link_tag 'compiled/app.css', :media => 'screen, projection' %>

We can now try: $ compass compile or $ compass watch

Create a bit of content to look at

$ rails g scaffold note title:string content:string
$ rake db:migrate
$ rails s
$ open http://localhost:3000/notes

Edit our stylesheet ...

h1
  :color green

Add class to body tag:

class="two-column"

Replace body content in layout:

  <div id="header">
    Lorem...
  </div>
  <div id="main-content">
    <%= yield %>
  </div>
  <div id="sidebar">
    <h1>Sidebar</h1>
    <ul>
      <li>line1</li>
      <li>line2</li>
      <li>line3</li>
    </ul>
  </div>
  <div id="footer">
    Lorem...
  </div>

Mixins

See http://compass-style.org/docs/reference/compass/ for documentation on mixins built into Compass and http://compass-style.org/docs/tutorials/ for some tutorials - at least you should read the best_pratices...

Example

For rounded corner effect add the following to app.sass:

@import "compass/css3/border-radius"
h1
  :background-color #111
  :color green
  @include border-radius(4px, 4px)

Browse the rather large set of mixins, there are lots of nifty little helpers and utilities. To name a few effects there are gradients; box/text-shadow; and resets. Of utlities one may start by looking at link styling; list bullets; sprites & text replacements; and truncating texts.