Navigation

How to write simple, elegant CSS with Compass & Sass

By Sara Vieira | CSS | Nov 14, 2013

A lot of designers use some sort of CSS pre-processor, whether that be Sass, LESS or Stylus. If you’ve used any of these, you’re probably also aware that Compass is a framework built on Sass, and although its installation may be off-putting, once you use it you’ll quickly discover it’s one of the best skills any web designer can learn.

If you’ve never used Sass before, I’d recommend that you take a look at WDD’s introduction to Sass.

Compass works like a framework for your CSS. When you’re working on a large project it’s easy for things to get out of hand and often finding things in your own CSS is a challenge. Compass attempts to address these problems, with the added benefit of working with vendor prefixes.

 

What is Compass?

As I said above, Compass is a framework for your CSS that resolves some of the problems with the language. It also includes a few tools to make development faster and easier:

  • like Sass, Compass supports variables, mixins and nesting;
  • it provides a whole range of helper functions for images, colors, typography and more;
  • it supports mathematical calculations;
  • it helps ensure cross-browser compatibility.

Like Sass and LESS, Compass is just a tool to make website design simpler.

 

How to install Compass

Compass is a Ruby gem, so in order to install it you first need to have Ruby installed on your machine. Fortunately Ruby installation is simple, on Windows you just need to download this Ruby Installer For Windows, on Mac/Linux follow the instructions on the Ruby site.

Once you have Ruby installed, installing compass is as easy as this:

gem install compass

This will install both Compass and Sass.

If you want to create a Compass project, you’d then type:

compass create /path/to/project
cd /path/to/project
compass watch

These three lines of code mean that anytime you change a Sass file they’ll be automatically compiled into CSS.

Alternately, you could use Codekit (Mac) or Prepros (Windows) to compile the Sass when it’s saved.

 

Getting started with Compass

Compass is divided into modules and in order to start using its utilities we first need to import the module we want into our main .scss file. For example, to import the CSS3 module we’d use:

@import "compass/css3";

Now we can start using the utilities and mixins that Compass offers for the new properties that came with CSS3. The very best thing about this is that we don’t have to type vendor prefixes over and over again, which has always been a problem when it came to CSS3.

Here’s an example, if we wanted to create a simple 3 column layout with a 20px gutter, in CSS we’d need to type:

div
{
        -webkit-column-count:3;
        -moz-column-count:3;
        column-count:3;
        -webkit-column-gap:20px;
        -moz-column-gap:20px;
        column-gap:20px;
}

You can see how unmanageable that quickly makes our code. With the help of Compass and Sass all we need is this:

div
{
        @include column-count(3);
        @include column-gap(20px);
}

As you can see, we’ve removed the vendor prefixes, and what took 6 lines of CSS we accomplished in just 2.

Another example of CSS that requires a lot of typing, is gradients. Here’s how we’d write a simple white to black gradient in CSS:

.gradient
{
        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #000000));
        background-image: -webkit-linear-gradient(#ffffff, #000000);
        background-image: -moz-linear-gradient(#ffffff, #000000);
        background-image: -o-linear-gradient(#ffffff, #000000);
        background-image: linear-gradient(#ffffff, #000000);
}

Creating the same effect with Compass is as simple as:

.gradient
{
        @include background-image(linear-gradient(#fff, #000));
}

Not only does this significantly reduce the amount of code, but if you want to change the colors, in the Compass version you only have to change them once.

There’s a full list of the shortened CSS3 properties here.

Compass also includes some helpers for links, one of which is a real time-saver. First, we need to include the typography model as the start of our main Sass file:

@import "compass/typography"

The typography module has great shorthand for styling colors, like so:

a
{
        // link colors (normal, hover, active, visited, focus)
        @include link-colors(red, blue, grey, red, blue);
}

This is the best thing about Compass; it takes the code we use on a daily basis and gives us shorthand versions.

 

Conclusion

This article was just a quick introduction to Compass, but if you found the subject as exciting as I do, then I’d strongly advise you to check out their website and explore more of the utilities that are available.

I hope you’ll now consider using Compass and Sass in your projects, because they really are incredible additions to the web designer’s toolbox.

 

Do you use Compass or Sass? Do you prefer a different pre-processor? Let us know in the comments.

Featured image/thumbnail, compass image via Shutterstock.

Share this post
Comments (no login required)
  • FaNiels

    I use compass now for a few weeks and i love it! my code gets cleaner by the day!

  • HemanthMalli

    Learned something new here. Thanks for sharing !!

  • fokker

    less + bootstrap + own mixins & sort like plugins to do things once

  • andy

    Why not LESS? How good is it over less ? Or are they both the same?

    • Sara Vieira

      In my opinion it really comes to your personal taste, LESS has the advantage of not having to compile and if you like less it’s also a great pre processor.

      Sass has compass that helps you a lot with your CSS3, less also has extensions but they are pretty scattered.
      Personal opinion really , everyone has a different one.

  • prestonjones

    I prefer LESS. I do my work in Visual Studio 2012 with the Web Essentials plugin and have no issues with LESS, plus it precompiles so I don’t have to worry about runtime conversion to CSS. There’s also lots of mixins available on the internet that do the same thing as Compass.

  • http://moderni.in/ Moderni Infotech

    Thanks also for sharing your knowledge by making this blog. It’s really
    a great help for me. I hope you make more blogs like this.

  • Stephan Lueck

    I use and like it, and i need not a extra less.js script and it exist Bootstrap 3 on Github as SCSS version. With SASS/COMPASS we can use too Source MAPS

  • http://www.wiredtree.com/ Rachel Gillevet

    Hi Sara! Awesome article, we included it in our Monthly Resource Roundup http://www.wiredtree.com/blog/novembers-best-web-designdevelopment-cms-security-content/

  • Harish

    nice post. but i can this for static 4 pages website ?

  • rajmataj

    I believe for CSS3 columns, you can alternatively narrow your module call to just: @import "compass/css3/columns" and can call a shorthand as div {@include columns(20em 3)}; (I hope those tags worked in Disqus to show the code!!)