How to write simple, elegant CSS with Compass & Sass

Default avatar.
November 14, 2013
How to write simple, elegant CSS with Compass & Sass.

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

Sara Vieira

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website.

Read Next

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…

The 10 Best Logos of 2023 - Ranked

From vintage aesthetics to innovative new color schemes, we’ve seen a lot of creative logo designs this year. In this…

Exciting New Tools for Designers, February 2024

2024 is well underway and shaping up to be an interesting year. So, to help you keep your focus on working hard and…

The Art of Engineering AI Prompts

In the rapidly evolving world of artificial intelligence, the ability to communicate effectively with AI tools has…

15 Best New Fonts, January 2024

In this month’s roundup of the best new fonts, we find a large number of vintage, retro, and revival typefaces. Is it…

5 Web Design Disasters That Will Ruin Your 2024

Welcome to 2024, where web design is as fast-paced as ever. You know how crucial a killer website is nowadays — your…

14 Best Free SEO Tools in 2024

There is an ongoing debate about whether design is more art or more science. SEO is 100% alchemy; if you know where to…

3 Essential Design Trends, January 2024

Forget the cold, the web design space is hot with plenty of new trends taking root in 2024. From amazing animations…