Compass, Sass and CSS3 greatness

By | October 6, 2012

Part 2 of, what is to become my Sass series. This one will introduce us to Compass and all the great functionality that comes with it. But before we dive into that lets quickly have a look at installation of Sass and Compass.

Installation (The wrong way)

It’s not the wrong way and if you have a new(ish) mac there is no issue to install Sass and Compass on the command line it’s really easy.
This is how easy it should be:

  1. Open terminal
  2. Type: gem install sass
  3. Type: gem install compass
  4. Type: compass create newProject
  5. Off you go

Now I have to be honest, I’m not very good with the command line stuff. I can do it but only by copying and if stuff goes wrong then I’m up the proverbial creek with out a paddle.
So my installation tale goes like this:

  1. Try an install at work(realise for some reason only know to our IT teams github is blocked)
  2. Try an install at home (find out that the version of ruby is not the correct one)
  3. Try to update ruby find I need something else
  4. Try to install something else find I need something else as well
  5. Do all that find find I’ve installed ruby but my mac can’t pick it up
  6. Go to bed 4 and half hours later still not working
  7. Try again the next day doesn’t work
  8. Go to bed 4 and half hours later still not working

You get the idea….anyway 4 days later I install ruby on my PC laptop using the exe file. Then run the commands and all is well. I did eventually get it working on my mac but by then I had all my projects on my PC.

Installation (The right way)

Then I found scout:

  1. Download Scout App
  2. Run and install
  3. Off you go

There are others like livereload and compassapp but scout is easy and free.

What is Compass?

According to the Compass website it’s

“Compass is an open-source CSS Authoring Framework.”

And that is exactly what it is. Sass is like the the underlying language but it’s compass that really make our life as front end developers easier. It is full of mixins and reusable bits of code that can be used in your CSS with one line of code (well 2 because you’ve got to import the file as well but you know what I mean). So what can we do?

Set up project with Compass and Scout

If you are uncomfortable with command line this is the easiest way
Create project folder with these files and folders (index.html, css, images, js, sass)
Folder Sructure

Open Scout app, click the “+” at the bottom left then find your project folder

New Project

Then configure your project:
Project Configuration

  1. the folder your SCSS files are in
  2. the folder your CSS files are in
  3. the output compression (I choose expanded while developing then compressed for production)

Compass basics

Reset

We all use some sort of reset don’t we? I’ve actually just jumped ship from Eric Meyers reset css and changed to normalize css just because Paul Irish says so and that’s good enough for me. Essentially they do the same thing and there is nothing wrong with reset and it come baked into compass.
So how do I use it?

@import "compass/reset"

Thats it. All of Eric Meyers years of research and discovery imported with one line. Pretty good huh?

So you’ve put that at the top of you SCSS document and reset all of your html elements. What else can we do?

CSS3

So as we all know CSS3 is good but browser prefixes are bad. So here comes compass to the rescue.
Want a cool border raduis on those buttons? Easy.
Put this at the top of your SCSS.

@import "compass/css3"

Then anywhere you need a border radius you just add

@include border-radius(5px);

The 5px in brackets is the radius you want the border to be.
This will output in the compiled css as

-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;

Cool eh?

There is loads more you can do with Compass but we’ll explore that in later posts. In the mean time, if you want to learn more about compass and the other CSS3 goodness go to the compass reference page.

Other posts in the series

13

One thought on “Compass, Sass and CSS3 greatness

Leave a Reply

Your email address will not be published. Required fields are marked *