I’m sure you’ve heard about compass, but what is it? and what does it do for me? In order to install Compass we’ll have to use that strange beast called “Terminal.” Before we begin my young padawan, here’s a few reasons from the official Compass Website why designer’s love compass….
Cleaner Markup without presentational classes
Chock full of reusable patterns
Creating Sprites got a whole lot easier
Easy to use mixins
If you’re a user of Sass (yes, capital ‘S’ and the rest is lowercase. Not ‘SASS’) then you’re aware of the installation process and the need to watch files in order to preprocess. Compass and Sass work together, but if command line watching isn’t your thing then there’s a Compass GUI for that. I, however will be using the amazing and wonderful Codekit for the rest of my discussion. Codekit will automatically detect Compass projects if a compass configuration file is included within the project’s root folder.
Let’s start at the beginning and assume you already have Sass installed along with Codekit. Step numero uno is to open up your Terminal –or whatever you use to type command lines with– and enter the following;
Verify Compass is installed
That’s it! Compass is now installed and we’re ready to Rock N’ Roll. In order to use Compass and Codekit together we need to make Codekit aware that’s exactly what we wanna do. Drag your project folder into the left side of Codekit and right click with your mouse…
Compass Frameworks & Extensions
You install Compass extensions by adding a load/require statement to the beginning of your project’s config.rb file. If you use third–party Compass plugins, any require statements must contain a full, absolute path to the plugin’s required file (usually a gem or .rb file).
Powering Up Compass
In order use Compass in our work we have to reference Compass plugins using @import statements from our style sheets.
The power that we now have with both Sass and Compass is tremendously powerful allowing us to do amazing things with our style sheets like so..
Notice that we now have no need to write vendor prefixes because Compass is going to take care of that for us “auto–magically.” The neat thing about this approach –compared to the diy method– is that our style sheets are nice and neat once again. We also have no need to return to our style sheets in order to repair vendor prefixes and even differing syntaxes. Pretty Cool huh?
Although this is only a glimpse into Compass, I hope it’s enough to spark your interest to investigate this helpful tool even further. As always, any questions you can always hit me up here with a comment or Twitter.