Compass lightning talk

The “compass/reset” module

Exciting, isn't it?

Compass also provides a bunch of utility modules for things like layout, grids, enumeration (dynamic style generation), color management and other common tricks (eg clearfix).

Image via image-url helper

This is an element with the background image set using the image-url helper

font-face helper

This is text using the “Gardener” font, set using the font-face helper.

Rounded corners

This box has some rounded corners.
I used the border-radius mixin for the base style, and then changed one of the corners with border-bottom-right-radius

Gradients

Element with background gradient

CSS3 transitions

Hover
This element has a 2 second transition which will animate its width property on hover.

Opacity

Disc-blue
Disc-blue
Disc-blue
The icons to the right have 25%, 50% and 75% opacity

Sprites

The hover effect is provided by a sprite that was built from individual images by Compass.