Activate Compass Captain

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….

  1. Cleaner Markup without presentational classes
  2. Chock full of reusable patterns
  3. Creating Sprites got a whole lot easier
  4. 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;

Install Compass

$ gem install compass

Verify Compass is installed

$ compass version

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…

Enable Compass by right–clicking on the project and choosing “Compass” → “Use Compass on this project”
Note: your Compass project must have a configuration file in order to work with CodeKit. You can also create a completely new Compass project by using the command in the File menu or by clicking the gear icon in the lower left corner of the Codekit window.

Once you’ve told Codekit to use this project with Compass, Codekit will need to locate the compass config.rb file. If there isn’t a config.rb present we must tell Codekit to make a new one

When you use Compass on a project, you may not use CodeKit’s “frameworks” feature for Sass files. (This is because Compass *is* a framework manager, so you use it instead.) Likewise, for Compass projects you must control all settings for Sass files by editing your Compass config.rb file rather than using the Inspector in CodeKit.

Configuring Compass

# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "css/sass"
images_dir = "img"
javascripts_dir = "js"

# output setup
output_style = :nested
environment = :development

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

line_comments = false
color_output = false

# If you prefer the indented syntax, 
# you might want to regenerate this
# project again passing --syntax sass, 
# or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass css/sass scss && rm -rf sass && mv scss sass
Compass config.rb File

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).

# Require any additional compass plugins here.    
# use the absolute path to the plugin
require "/Library/Ruby/Gems/1.8/gems/compass-0.12.1/lib/compass.rb";
        
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "css/sass"
images_dir = "img"
javascripts_dir = "js"

output_style = :compressed
environment = :production

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

line_comments = false
color_output = false

# If you prefer the indented syntax, you might want 
# to regenerate this
# project again passing --syntax sass, 
# or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass css/sass scss && rm -rf sass && mv scss sass
Compass Config File

Powering Up Compass

In order use Compass in our work we have to reference Compass plugins using @import statements from our style sheets.

@charset "UTF-8"
// compass import
@import "compass";

//Author styles below this comment
selector { 
    property: value;
}

another-selector {
    property: value;
}

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..

@charset "UTF-8"
//---------------[ Compass ]
@import "compass";

//---------------[ Resets ]
@import "html5bp-resets.scss";

//---------------[ Author Styles ]
#header-bg {  
    //compass box-shadow
    @include box-shadow(
    $shadow-1: inset 0 -2px 2px rgba(255,255,255,.4),
    $shadow-2:       0 -2px 2px rgba(255,255,255,.4),
    $shadow-3:       0 -2px 2px rgba(0,0,0,.8));
    // compass box-sizing
    @include box-sizing(border-box);
}
Compass removing our vendor prefix bloat

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.

Compass Links!

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.
  1. ❧ Ben shouted:
    2012/07/01 • 11:12 pm

    Thanks for this – very helpful. How would you require Zurb’s Foundation in a compass project?

    I’ve installed the Foundation gem and added the following to my config.rb file as per Codekit docs: require “/Library/Ruby/Gems/1.8/gems/ZURB-foundation-3.0.0/lib/zurb-foundation.rb”;

    But when I try to compile the project form Codekit I see “LoadError on line 1 of /Library/Ruby/Gems/1.8/gems/ZURB-foundation-3.0.0/lib/zurb-foundation.rb: no such file to load — foundation/version
    Run with –trace to see the full backtrace”

    If I open zurb-foundation.rb, line 1 contains: require “foundation/version”

    Does anyone know if this is Codekit, Compass or Foundation?

    Any pointers in the right direction would be much appreciated.

    Cheers

    1. @ben
      It sounds like you’ll need to go back to your terminal and set up the zurb foundation project per the docs.

      compass create <project-name> -r zurb-foundation --using foundation

      When I tried to install Zurb foundation by way of the terminal line previously mentioned, I received the following message …

      Gem::LoadError on line 1637 of /Library/Ruby/Site/1.8/rubygems/specification.rb: Unable to activate zurb-foundation-3.0.0, because compass-
      0.13.alpha.0 conflicts with compass (= 0.12.2)

      @chrisepstein told me that “it sounds like foundation needs to relax their version constraints.”

      Here are the links for the documentation with Codekit and from Zurb

  2. ❧ Ben shouted:
    2012/07/02 • 5:56 pm

    Thanks mate, the weird thing is that Compass/Foundation works in the command line – I’ve decided to use it for creating new projects and watch/un-watching it.

    Cheers, thanks for your help.

  3. ❧ Luis shouted:
    2013/12/20 • 1:04 pm

    Hi, I’m trying to install Compass and get this error:

    ERROR:  While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory.
    1. Hi Luis,

      Looks like you’ll have to execute this command as an administrator which means you’ll need to type ‘sudo’

      sudo gem install compass
  4. ❧ gavin shouted:
    2013/12/21 • 11:28 pm

    Stuck at the first task i get to :-p
    As soon as I enter gam install compass I get You don’t have write permissions for the /Library/Ruby/Gems/2.0.0 directory.
    so I’m not sure what to do next to get compass to install

    1. Hi Gavin,

      Looks like you’ll have to execute this command as an administrator which means you’ll need to type ‘sudo’

      sudo gem install compass

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2012/05/29