Over a million developers have joined DZone.

Compass: Painless CSS Precompilation

How to use the Ruby gem Compass for CSS precompilation.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

If you have been up to any kind of web designing in the past 6 months, you have probably heard of CSS precompilers. In a nutshell, they have emerged to give css the capabilities it didn’t have. But not without the cost of introducing an intermediate file which would eventually get transformed into css. So here I get down to write a beginner’s guide that might help kick-off with SASS (syntactically awesome style sheets) & compass. It covers important concepts, installation & a sample project to see it in action. 

I. Important Concepts

As mentioned above, both SASS & less needs to be compiled into css but to be careful with the terms this process is more formally known as transpiling. Because compiling often involves taking a source code and transforming it into something which is runnable in a machine readable (byte code) format. However with sass & less, this whole thing is slightly different as it only involves a process where the source files in these languages are taken and transformed into another language. Here it’s CSS which is a stylesheet language. However making things more confusing, the same process is also widely referred to as precompiling. I’m sorry if I have already cracked your head here. :( 

II. Installation

Focusing back on Compass, it is just another implementation of SASS which comes as a Ruby gem. If you’re not a rubyist, a Ruby gem is more like a library when you think of it from a C++ perspective. So let’s setup Compass first,

  1. Being a Ruby gem, Compass requires Ruby. If you on a mac you should probably have it. If you want to confirm whether ruby is already there, you can do so by hitting up “ruby -v” on your terminal/command prompt. If you don’t have it, head to Ruby Lang.
  2. To install compass hit the following two commands in your terminal,
    $sudo gem update --system

Note: Sometimes you might face trouble, if you don’t use sudo. Hence, I have chosen to do it in sudo mode. If you’re on windows you just need to open cmd.exe as an administrator. Above $ is nothing but a placeholder that you don’t need to type. 

III. Sample Project

Now that we got everything setup. We can jump into our first project, a simple responsive page with a background video played from youtube. So to create our sass/compass enabled project there are two ways one is to generate project skeleton by using the following command:

$compass create compass_demo

The next approach which is mostly used by those who have been using compass over a period of time is to create it manually from an existing project. I know for certain that you are unlikely to have one especially, if you had decided to follow this post in order to try compass for the first time. Don’t worry, I got you covered! you can use the project I have worked out for this post from github.

However, I wouldn’t encourage you to follow the second approach above as it will prevent your hand getting dirty building a compass enabled app from scratch. Therefore, assuming you stick with the first mode, here comes the gist of this post, setting up the config.rb ruby file which got generated after the create command above. let’s tackle it, this file gives in our hand to define two important aspects of this whole process. The first would be to define where our css, sass, js and image files are going to reside basically, the structure of our project.

The next is to define which syntax we are going to use with our sass files. I have chosen.scss, as I prefer its syntax over .sass. Here is the content of my configurator (i.e.config.rb),

# Require any additional compass plugins here.

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

output_style = :expanded # After dev :compressed

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

line_comments = true

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
preferred_syntax = :scss

That was neat isn’t it? However for 2 reasons I’m not going to walkthrough the SASS file

  1. it’s very simple that it only uses few mixins & exactly 3 variables!
  2. it would make this post a very lengthy one.

So here is my style.scss, simple as it can get!

@import 'compass/css3';

$bg_color: #3b3531;
$text_color: #ffffff;
$header_color: #B7AE74;

@mixin height($min, $max) {
    min-height: $min;
    max-height: $max;

@mixin min_height($min) {
    min-height: $min;

body {
    background: $bg_color;
    color: $text_color;

.video-section .pattern-overlay {
    background-color: rgba(71, 71, 71, 0.59);
    padding: 110px 0 32px;
    @include min_height(496px);

#footer {
    @include height(250px, 300px);

.dark-overlay {
    padding: 20px;
    @include min_height(206px);

.dark, .video-section h1, .video-section h3 {
    text-align: center;

.dark h1, .video-section h1 {
    font-size: 110px;
    font-family: 'Buenard', serif;
    font-weight: bold;
    text-transform: uppercase;
    margin: 40px auto 0px;
    text-shadow: 1px 1px 1px #000;
    -webkit-text-shadow: 1px 1px 1px #000;
    -moz-text-shadow: 1px 1px 1px #000;

h3 {
    font-size: 25px;
    font-weight: lighter;
    margin: 0px auto 15px;

.dark h3 {
    margin: 10px auto 2px;
    color: $header_color;
    font-size: 22px;

.dark h4 {
    margin: 16px auto 2px;
    color: $header_color;
    font-size: 12px;
    font-weight: lighter;

#credits {
    margin-top: 90px;

.video-section .buttonBar {
    display: none;

.player {
    font-size: 1px;

So where is my CSS? Let me get there! once we properly setup our config.rb, all what we need to do is open up a terminal window, browse to our project directory and hit the following command,

$compass watch

If you trust me, here on you never need to worry about your CSS file as far as you can write your sass file correct. Because the watch command above is constantly on the lookout for any change(s) or modification(s) you make to your sass file. As soon as you save it, it will pick it/them up, transform it into css (i.e transpiling) & then will place it in the designated directory which is defined in the configuration file. So let alone the watch process to look after the css file(s).

IV. Tl;dr

You can view the completed demo here & obtain its code too! One will always have the doubt what happens to those css files which don’t require pre-compilation like thebootstrap.css. Well, that too is handled well by the watch process that it doesn’t over-write or remove any css files(s) that do not have a corresponding sass file. You can actually observe it if you happen to work with the above repository. Hope it helps you take the dive into the sass world with confidence, thanks.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Published at DZone with permission of Hamzeen Hameem, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}