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

AI Changes Everything and Nothing

The marketing frenzy surrounding the recent flood of AI-powered apps and services has caused some observers to question…

15 Best New Fonts, March 2023

Fonts are one of the most critical tools in any designer’s toolbox. With clever use, you can transform a design from hu…

20 Best New Websites, March 2023

We have another exciting collection of the best new sites on the web for you. In this month’s episode, there are severa…

Exciting New Tools for Designers, March 2023

We have invoicing apps and scheduling tools. Some resources will save you the trouble of hiring a designer or developer…

Free Download: Budget Planner UI Kit

Designing an onboarding process can be tricky; there are so many different options, and if you get it wrong, you could …

3 Essential Design Trends, February 2023

There’s a common theme in this month’s collection of website design trends – typography. All three of these trends show…

Free Download: Education Icons

Icons are essential for successful web design. They provide an eye-catching, unobtrusive way to communicate important i…

15 Best New Fonts, February 2023

The fonts you embed in your website transform the design and can mean the difference between an extraordinary brand exp…

Unlocking the Power of Design to Help Users Make Smart Decisions

Users are faced with decision-making on websites every day. The decision-making process can be far more complex than it…

20 Best New Websites, February 2023

The quality of websites in 2023 has moved up a gear, with designers cherry-picking trends as tools, embracing new ideas…

AI’s Impact on the Web Is Growing

Despite the massive strides tech has taken in the last few years, we rarely see a week as tumultuous as this. When your…

Exciting New Tools for Designers, February 2023

No matter what you’re working on, you can guarantee that there’s a cool app, resource, or service that will help you do…