Compass

What's compass?

CSS is all fine-and-dandy, however it has it's limitations, mostly because of browser inconsistencies and cool new features which aren't standardized yet. To support all these differences (eg. -webkit, -o, -ms, -moz), to speak frankly, you practice typing (hopefully you're touch typing by now). Wouldn't it be better if you could implement abstracts, ie. functions, not to retype the same thing 10 times? Enter Compass! Or actually enter SASS! SASS is a CSS-preprocessor, which means it reads its own magic syntax sauce, and then outputs CSS which any browser can read. This magic sauce has features such as math, functions, variables etc; which allows us to replace put logic in our CSS. Wow! Now Compass on the other hand is a library of pre-made functions for SASS. Meaning you don't have to create your own function to duplicate border-radius and append all vendor prefixes for it.

SASS

Syntatically Awesome Stylesheets (SASS) has two syntaxes:

• SASS condensed version which remind you of python.
• SCSS which is exactly like CSS but with all the magic sauce.

Using the SCSS syntax allows you to just rename any old legacy .css file to .scss and start having fun.

To learn about mixins, functions, variables etc. check out the SASS Reference

Compass

So Compass is a ruby library which you should always use if you're writing stylesheets, never CSS or plain SASS. It simplifies development as well as updates and maintenance by hours!

No need to worry about a learning curve regarding compass, once you have figured out how to compile the .css files you're good to go and in the beginning you can just write 100% regular CSS if you want. But you really should glance at the Compass reference from time to time, you'll fall in love with it for sure

Creating a new project

So if you're in charge of creating a new project using compass, here's a simple howto:

1. Navigate to the root of the project (if it's WP/Drupal go the theme folder) with the terminal

2. Type compass create . --bare --sass-dir "stylesheets/scss" --css-dir "stylesheets/css" --javascripts-dir "js" --images-dir "images"

   Wow, that's a mouths full, let's step through it:

   • compass create . This creates the compass project in the working directory (.), you could also put it into another folder if you preferred.
   • --bare Use a bare project, meaning no auto-generated files, if you want to use the Blueprint css framework you could type --using blueprint instead. If you want the default print.scss, style.scss files just omit this flag all together.
   • --sass-dir "stylesheets/scss" Where compass should look for sass files.
   • --css-dir "stylesheets/css" Where compass should put the generated css (these are the ones you should put in your <link>)
   • --javascripts-dir "js" Actually I've never seen this used...
   • --images-dir "images" Some compass plugins might generate images for you (eg. sprites, transparent backgrounds etc.) this is were they will be located.

3. Create your first sass file, eg. stylesheets/scss/style.scss

4. Type compass compile to generate the css files, compass compiles all scss files not prefixed with a _ (eg. _base.scss) into css files.

5. Put a <link rel="stylesheet" href="stylesheets/css/style.css"> in your markup!

6. If you're developing you should use compass watch & which automatically generates new css files as the sass source is modified, so you don't have to spam compass compile... after all this is not about learning how to type. _Sidenote: the & at the end means the command should run in the background so you can use your terminal.

Note, there are also GUIs for setting up a project, if you know how to use one, feel free to add a howto.

Working in an already existing project.

1. Go to the directory where the config.rb file is located (usually the root or the theme folder)
2. Type compass watch &

Note, there are also GUIs managing compass, if you know how to use one, feel free to add a howto.

The config.rb

This is a file where you can configure compass a bit. Once you make a change you need to restart compass watch for the changes to take effect.

# Require any additional compass plugins here.

require 'sassy-buttons'
require 'normalize'

# Set this to the root of your project when deployed:
css_dir = "stylesheets/css"
sass_dir = "stylesheets/scss"
images_dir = "images"
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# FOR PRODUCTION YOU SHOULD USE :compressed
output_style = :nested

# To enable relative paths to assets via compass helper functions. Uncomment:
# USE THIS!
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

Plugins

Compass is a great tool ease your css development, however there are some features which aren't integrated that could help even more. Say you want to create fancy 3d buttons with css, there's an extension for that. Or say you want to use rgba as a background property but want IE support and don't want to change the png variant for IE at every css change, there's an extension for that as well.

• Normalize An awesome css-reset which normalizes all elements instead of removing their inherent styles. This way you get a good base for your css which you can work from without worrying about browser inconsistencies nor about styling every single element there is.

  Usage:

  1. Put require 'normalize' in the config.rb file
  2. Put @import "normalize"; and @include normalize; at the very beginning of your scss.
  3. Restart compass watch, this is needed because you canged the config.rb

• Sassy buttons A library making it amazingly easy to create good looking 3d buttons for all browsers. Check out the link for examples.

  Usage:

  1. Put require 'sassy-buttons' in the config.rb file
  2. Run compass install -r sassy-buttons -f sassy-buttons in the command line
  3. Put @import "sassy-buttons"; somewhere in the stylesheet which requires sassy-buttons
  4. Restart compass watch, this is needed because you canged the config.rb
  5. Include the mixin on your button! eg. @include sassy-button("shiny", 15px, 26px, #ffd71a, #ffaa1a);

• Compass rgbapng A useful library which lets you use the rgba property on backgrounds cross-browser!

  Usage:

  1. Put require 'rgbapng' in the config.rb file
  2. Put @import "rgbapng"; somewhere in the stylesheet which uses the mixin.
  3. Restart compass watch, this is needed because you canged the config.rb
  4. Include the mixin where you need it ! eg. @include rgba-background(rgba(0,0,0,0.75)); or @include rgba-background-inline(rgba(0,0,0,0.75)); (if you don't need IE7 support).

• Compass CSS arrow Create CSS arrows

  Usage:

  1. Put require 'compass-css-arrow' in the config.rb file
  2. Run compass install compass-css-arrow in the terminal
  3. Put @import "compass-css-arrow"; somewhere in the stylesheet which uses the mixin.
  4. Restart compass watch, this is needed because you canged the config.rb
  5. Include the mixin where you need it ! eg. @include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5, solid);

Troubleshoot

• WARNING: 'sassy-ie-overlay.png' was not found (or cannot be read) in ...

  Solution:* run compass install -r sassy-buttons -f sassy-buttons