Skip to content

Installing Compass

Jump to bottom
AtomicPages LLC edited this page Sep 4, 2016 · 6 revisions

Deprecation Warning

Skeleton Sass 2.x does not currently support the use of Compass. Skeleton Sass depends on Sass 3.3 and above. Compass does not currently have a stable release that supports Sass 3.3. If you wish to use Skeleton Sass 2.x please do not attempt to use Compass 0.12.x

What is Compass?

Compass is an open-source CSS Authoring Framework. compass-style.org

Assuming you have installed:

Then the next step is to install Compass if you wish to use the Compass component of Skeleton Sass.

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
C:\Users\John Doe>gem install compass

Note: $ and C:\Users\John Doe> are placeholders and are NOT meant to be typed.

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. Compass does come with it's very own executable, however, for the sake of testing we need not meddle with it.

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 here are a few good resources to learning about basic BASH and Command Prompt techniques:

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

# convert to css
$ sass --update --compass style.scss:style.css
Windows Command Prompt
:: 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 the Compass Executable

As mentioned previously, Compass does come with its own executable that we may wish to use. For additonal information on the command, simply issue compass --help at the command line.

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
C:\Users\John Doe>cd path/to/my/files
C:\Users\John Doe>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