HTML 5 Boilerplate and Compass

Hey there, at #McrFRED someone asked if I used, Sass, LESS, Compass and how I use them.

So, here's how :sunglasses:.

For this demo I'll be using H5BP.

So go ahead and grab a copy by opening up Terminal and running:

1

git clone [email protected]:h5bp/html5-boilerplate.git

Or download it as a zip from H5BP if you prefer.

Open up Terminal, go to the directory and run:

1
2

gem install compass
compass install compass

In the root directory, create a config.rb file, open it, add the following and save:

1
2
3
4
5

http_path = "/"
css_dir = "css"
sass_dir = "css"
images_dir = "img"
javascripts_dir = "js"

In your css folder, change main.css to main.scss.

Open main.scss and add:

1

@import "compass";

Now you can start using Compass.

So for example, rather than writing out:

1
2
3
4
5
6
7

#radial-gradient {
  background-image: -webkit-gradient(radial, 45px 45px, 0, 45px 45px, 30, color-stop(33.333%, #00ffff), color-stop(100%, #1e90ff));
  background-image: -webkit-radial-gradient(45px 45px, #00ffff 10px, #1e90ff 30px);
  background-image: -moz-radial-gradient(45px 45px, #00ffff 10px, #1e90ff 30px);
  background-image: -o-radial-gradient(45px 45px, #00ffff 10px, #1e90ff 30px);
  background-image: radial-gradient(45px 45px, #00ffff 10px, #1e90ff 30px);
}

In your .scss file, you can write:

1
2
3

#radial-gradient {
  @include background-image(radial-gradient(45px 45px, aqua 10px, #1e90ff 30px));
}

Back to Terminal, run:

1

compass watch

Compass will now be watching for any changes and compile the CSS.

There's loads of awesomoneness going on with Compass.

Here's the gradient example http://compass-style.org/examples/compass/css3/gradient/ and there's loads more here http://compass-style.org/reference/compass/.

And… it's awesome, so yeah, it's on GitHub https://github.com/chriseppstein/compass.

Next post I'll talk about how to debug and Source Maps with Chrome Dev Tools.