gistfile1.txt

So right now you're probably looking at the timeline at the bottom of this video and thinking

"Sweet! This is gunna be short! I like short."

The most important thing you need to understand about Compass is that Compass makes your life easier and your stylesheets awesome.

Compass is a stylesheet authoring framework that makes stylesheets and markup easier to build and maintain. Compass is built on top of Sass, With Compass, you write your stylesheets in Sass instead of CSS.

Sass is a stylesheet rendering engine, Sass gives you features that CSS lacks, including constants, arithmetic, mixins and more. Sass has a lot of features, many of which are out of the scope of this video, but to understand Compass we're going to need to run through Sass bootcamp. To kill two birds with one stone, I'll explain Sass syntax and its usage as I go along.

We'll assume you have Sass and Compass installed, so first let's initialize a new project using Compass in standalone mode. To do that, open up your terminal and bang out the following

$> compass -f blueprint compass_demo

This tells compass to build a new project using the Blueprint framework and builds a simple file structure for us to use. It also gives you simple copy+paste link tags to link out to our newly created CSS files which Compass has rendered for us.

It's important to note here that Compass is framework agnostic. You can use compass natively in Rails, Merb, Staticmatic, Sinatra, Ramaze and also in standalone as we're doing here. Standalone is probably the most flexible mode. For instance, you could easily use Compass within an application written in PHP using standalone mode if you wanted to.

Let's look at some code. Change directories to your project

$> cd compass_demo

and open your editor

$> mate .

Before we get into the meat and potatoes of Compass, we'll need some markup to style. I've already made made a markup template for the sake of brevity, so I'll just make a new file with the compass HTML template, save it, and open it in our browser.

The first thing you'll notice is that this doesn't look like your usual unstyled HTML. This is the Typographical baseline styles from blueprint that we loaded when we initialized our Compass project. A quick peak at a grid overlay shows us that things are aligning horizontally quite nicely, but there is no structure. Let's have a peak at the markup.

This is the flow of a simple two-column layout with a header and top navigation. Our wrapper div is called compass-demo, and within that are three divs called Header, Primary and Secondary.

Let's peak at our sass and start hammering some things out. Our sass files are within the Src directory, and our rendered CSS files are held within the Stylesheets directory. We're going to open up the screen.sass file in Src.

Not too scary. a pithy few lines of code gave us a reset stylesheet and our Blueprint framework out of the box. Let's take a look at what Compass compiled by opening up the screen.css file in stylesheets screen.css

That's quite a lot of code.

We don't need all this. All we really need is the reset and the typography settings. There is a lot of the blueprint grid classes in here that Compass rendered for us. We won't be using these, instead we'll be leveraging the power of Blueprint right from within our stylesheet, rather than putting a bunch of presentational class names in our markup.

Let's go back to our terminal and put Compass into Watch mode by typing

$> compass -w

Compass is now listening to every Sass file in the Src directory for updates. The moment you save an update to the screen.sass file, it renders a new copy of the screen.CSS file for you

Let's do that. Go back to your editor to the screen.sass file. We can safely delete the blueprint-scaffolding mixin, and instead of loading all of blueprint, we'll kist load the typography.

Now we're going to build a tree similar to what we saw in the markup in Sass, and write some pretty basic code.

!green = #0F0

body
	:background-color #333

#compass-demo
	+container
	:background-color #fff
	:padding
		:left 10px
		:right 10px
	#header
		+column(24, "last")
		ul#navigation
			+no-bullets
			+inline-list
			li
				:margin-left 20px
				a
					:color = !green
					&:hover
						:color #000
	#primary
		+column(16)
	#secondary
		+column(8, "last")
		p
			:color = !green - 10

Believe it or not, this is our entire layout. It's done. Now we go back to our browser and refresh. We now have a two-column layout with a header in less than 30 lines of code.

A quick peak at the code Compass rendered for us and we can see there's a lot more happening behind the scenes. Let me break it down and show you what's sass and what's compass.

You may have noticed, we're not using brackets. Brackets are ridiculously ugly. Stylesheets are supposed to be beautiful and easy to understand. Instead of brackets, Sass uses whitespace. We're all used to indenting anyway, right? Just indent by two spaces and it nests the next rule or selector within the parent. Simple. Beautiful. Fast.

The way you write your rules is pretty open. You can write them how I did, with a colon in front a-la ruby, or you can use more familiar CSS-style syntax, putting the colon after the rule. You can use semi colons, or you can leave them out. That's your preference.

You can reference the parent and add pseudo selectors onto it using the ampersand. You can call constants that can be reused in many places. The value of the constants can be run through arithmetic.

And finally, the most important in terms of Compass - the mixin, indicated with a + symbol before the mixin. Mixins are blocks of SASS code that are defined once and can be reused as many times as you like. Compass makes great use of mixins to turn commonly-used style patterns into a one-line references to a mixin.

The mixins we used for our two-column layout are +container, +column, +no-bullets and +inline-list. +container and +column belong to Blueprint, and +no-bullets and +inline-list belong to the compass core.

That's it for the quick demo. For more info on Sass, visit sass-lang.org, and for compass visit compass-style.org