This is a brief overview and example of how Compass works
To see the original documentation go to http://compass-style.org
My working example is
which can be downloaded at
Compass, at its heart, is a framework upon which sass-based stylesheet frameworks are built so also uses ruby.
It provides the tools for building, installing and using reusable stylesheets that provide anything from full-fledged layout frameworks to designs for widgets or even full page designs.
All using the power of sass to keep the semantic meaning of the html pages clear and free of design details.
Linux or Mac Compiler
How Sass works:
Sass is an extension of CSS3. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin
I have covered this in more detail in my SASS blog post so look over this if you are unfamiliar with SASS.
My example uses the SCSS format.
Unlike LESS CSS, the style.css file is generated as you develop so there is no need to change anything in your code when deploying live.
Your html is as you normally would build your page.
My example is just 1 buttons to show SCSS and 3 A tags below to show hover states with Sprite
A sprite is one big image containing all icons/images used on your website.
You would want to do this to reduce the number of HTTP requests your website has to make to improve performace.
You can have multiple sprite files for different parts of your website if you wish.
NOTE: its worth not putting large images into sprites as this will increase the load time of the inital sprite image.
So lets run through what this is doing.
By default compass will look at the folder /images so this is importing in all .png images at /images/snails/ and turning them into 1 image.
Calling the new sprite image
So you request the sprite image using the same folder name that you created. In my case it was snails
Now you can set the height and width of the image from the returned sprite record.
I put this all in a Mixin so it can easily be called for any of the images in this sprite.
Setting the right image in your CSS
This calls the previous mixin so the height and width are set.
I pass in the image name that I would like to call.
And finally include a hover state so a different image will be displayed on hover.
Compass also comes with its own imports to provide a framework that provides common code that would otherwise be duplicated across other frameworks and extensions
Typography – Provides basic mixins for common typography patterns.
Utilities – Provides basic mixins for common styling patterns.