Getting started with Compass
Feb 18, 2013
Table of contents:
A couple of weeks ago I wrote a post on getting started with Sass. Sass is an extension of CSS3 that adds the ability to use preprocessor type variables, mixins and includes. This enables you to write cleaner and better CSS and allows you to minify it for use in production.
Compass is a “CSS Authoring Framework” that makes Sass even better! Compass allows you to use simple imports for many of the most common and reusable CSS patterns and syntax as well as much, much more.
In this post I will be showing you some of the components of Compass that I’ve found myself using the most and how you can start using them too to write better CSS.
If you aren’t already using Sass, take a look at my getting started with Sass post first. I guarantee, it will change how you write CSS forever.
Installing Compass
Compass, like Sass is simply a ruby gem that you can install on your computer. If you are running OS X, you will already have Ruby running so you can install Compass straight away.
However, as I mentioned in my post on Sass, I much prefer using the excellent application, CodeKit. CodeKit makes working with Sass and Compass incredibly easy and it comes with a load of other features that will make your life as a Web Developer a lot better.
I won’t show you how to install Compass on your particular set up because I’m sure there are many perfect tutorials out there on the Internet already, and it is beyond the scope of this post. From now on I’m assuming you’re good to go.
Now that you have Compass installed, you can include it in your project. In CodeKit this is simply right clicking on your project and clicking “Use Compass for this project”. This will produce a config.rb file where you configuration settings live. This allows you to alter the type of output and what directories you are using for your files.
Finally, in your main scss file, you need to import the bits of Compass you want to use. For example, here I’m going to be using the CSS3 components
@import "compass/css3";And now we’re ready to start using Compass!
Using the Compass components
The Compass framework is quite extensive and allows you to do all kind of interesting things. Covering every single component would take a whole series of posts!
In this introduction post, I’m going to be covering the CSS3 components as I’ve found them to be the most useful in my projects. Personally, I hate having to try to remember the syntax for every CSS attribute and so Compass allows me to write complicated CSS very easily. It’s also really nice that the amount of CSS is dramatically reduced when using Compass.
I’m going to be covering the following components as they seem to crop up quite often and all of them having annoying syntax that can be abstracted away using Compass.
- Border Radius
- Box Shadow
- Gradients
- Text Shadow
- Transitions
Border Radius
Border Radius allows you to make any block element have rounded corners.
In CSS you might write something like this:
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}As you can see, there’s a lot of duplication because you need to use the vendor prefixes.
Using Sass and Compass, you can simply write:
@include border-radius(10px);You can also use the following to target specific corners:
@include border-top-left-radius(10px);
@include border-bottom-right-radius(10px);
@include border-top-radius(10px);Using Sass and Compass, you only have to write one simple line and all of the vendor prefixes are already sorted for you.
Box Shadow
Box shadows are another CSS property that can mean you have to repeat yourself a lot to include all of the vender prefixes.
In CSS, you might write something like this to give an element a drop shadow effect.
{
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}Using Sass and Compass, you can simply write:
@include box-shadow(black 0px 0px 10px);Gradients
Gradients are notoriously a nightmare for writing out in plain CSS because you have to write 5 lines of code even for simple effects.
Using CSS, you might write something like this to achieve a simple two colour gradient.
{
background-image: -webkit-gradient(
linear,
50% 0%,
50% 100%,
color-stop(0%, #ffffff),
color-stop(100%, #aaaaaa)
);
background-image: -webkit-linear-gradient(#ffffff, #aaaaaa);
background-image: -moz-linear-gradient(#ffffff, #aaaaaa);
background-image: -o-linear-gradient(#ffffff, #aaaaaa);
background-image: linear-gradient(#ffffff, #aaaaaa);
}With Sass and Compass, you can simply write this:
@include background-image(linear-gradient(white, #aaaaaa));Text Shadow
Text shadow is a nice effect that can really give life to simply typography.
With traditional CSS, you might write something like this to achieve a letterpress look:
{
text-shadow: 0px 1px 3px rgba(255, 255, 255, 0.5);
}With Sass and Compass, you can simply write:
@include text-shadow(rgba(white, 0.5) 0px 1px 3px);Transition
Transitions can add nice subtle effects and interactivity to elements on a page. If you are adding effects using CSS, you can give users with newer browsers a better experience that degrades gracefully on old browsers without the need to write Javascript.
To create an effect that transitions the width of an element when you hover over it, you might write something like this in traditional CSS.
{
-webkit-transition-property: width;
-moz-transition-property: width;
-o-transition-property: width;
transition-property: width;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
-webkit-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
:hover {
width: 80px;
}With Sass and Compass, you can simply write:
@include transition-property(width);
@include transition-duration(2s);
@include transition-timing-function(ease-in);As you can see, you have dramatically decreased the amount of code you have to write which has significantly reduced the amount of repeated code. Using Sass and Compass also makes this effect much more maintainable.
Conclusion
As you can see, using Sass and Compass will dramatically improve your workflow and the quality of the CSS you produce. Your working files will be a lot cleaner because you don’t need to repeat yourself for every vender prefix. Your output will also be of higher quality because you don’t have to worry about getting the intricate syntax right for each property. And you will find it is a lot quicker to write CSS when you don’t have to deal with these problems.
If you are already comfortable with writing CSS, take a look at adding Sass and Compass to your workflow. I can honestly say, I will never go back to writing plain CSS, I’m sure you will feel the same way.
