Skip to content

Installing Compass

Jump to bottom
atomicpages edited this page Apr 17, 2013 · 6 revisions

What is Compass?

"Compass is an open-source CSS Authoring Framework."

Assuming you have installed:

Then the next step is to install Compass.

Note: if you are unsure about Ruby Gems then issue the gem -v command in Terminal or Command Prompt with Ruby.

Installing Compass

Thankfully, installing Compass is very easy using Ruby Gems! Open Terminal or Command Prompt with Ruby:

OS X and Linux

$ sudo gem install compass

Windows

gem install compass

Several dependencies will be met as the installation runs. Don't worry, it should be done in a relatively short period of time.

Testing Compass

Now that we have Compass installed let's test it! Copy & paste the following text into a file called style.scss and then return to the command line.

@import "compass/css3";
body {
    background-color: #f0f9ff;
    @include filter-gradient(#f0f9ff, #a1dbff, vertical);
    $experimental-support-for-svg: true;
    @include background-image(linear-gradient(top,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%));
}
.round { @include border-radius(4px); }
.shadow {
    &.light { @include box-shadow(1px 1px 5px rgba(255, 255, 255, 0.3)); }
    &.dark { @include box-shadow(1px 1px 5px rgba(0, 0, 0, 0.3)); }
}

Using Compass at the command line

Similar to SASS, Compass is easy to use at the command line. In the first case, we will be using SASS with the --compass option.

Now that we have our style.scss file we need to navigate to the directory where this is. If you're unfamiliar with directory traversal on your system we recommend these resources:

Terminal

# navigate to style.scss
$ cd path/to/my/style.scss

# convert to css
$ sass --update --compass style.scss:style.css

Windows

:: navigate to style.scss
cd path/to/my/style.scss

:: convert to css
sass --update --compass style.scss:style.css

Like magic Compass will convert your SASS script to a viable CSS file that a web browser can use to style web pages!

Using Compass Projecs

The Compass executable does provide us with the ability to create predefined Compass projects that include a useful directory structure, configuration options, and more. Run compass --help in the command line for additional info.

Creating a New Project

Compass makes it easy to create a new project.

OS X / Linux
$ cd path/to/my/files
$ compass create demo
Windows
cd path/to/my/files
compass create demo

Upon successful project creation you will see:

directory demo/ 
directory demo/sass/ 
directory demo/stylesheets/ 
create demo/config.rb 
create demo/sass/screen.scss 
create demo/sass/print.scss 
create demo/sass/ie.scss 
create demo/stylesheets/ie.css 
create demo/stylesheets/print.css 
create demo/stylesheets/screen.css  

*********************************************************************
Congratulations! Your compass project has been created.

You may now add and edit sass stylesheets in the sass subdirectory of your project.

Sass files beginning with an underscore are called partials and won't be
compiled to CSS, but they can be imported into other sass stylesheets.

You can configure your project by editing the config.rb configuration file.

You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
  1. To compile on demand:
     compass compile [path/to/project]
  2. To monitor your project for changes and automatically recompile:
     compass watch [path/to/project]

More Resources:
    * Website: http://compass-style.org/
    * Sass: http://sass-lang.com
    * Community: http://groups.google.com/group/compass-users/

To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
  <!--[if IE]>
      <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <![endif]-->
</head>
Configuration

In order to configure your compass project you need to edit the config.rb inside your project folder. By default you will see:

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

Other options to consider are:

output_style = :expanded
line_comments = false

For a better description of Compass check out compass-style.org for many great tips and extensive documentation!

Hate Command Line?

Command line, yuck! If this applies to you, then you're in luck! Two wonderful people have created GUI-based applications to ease your pain in rendering SASS + Compass scripts!

Clone this wiki locally