Compass


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
http://glynrob.com/examples/compass/index.html

which can be downloaded at
https://github.com/glynrob/compass

About:

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.

Windows Installer
http://compass-style.org/help/
Or if you do not want to use the command line use Scout

Linux or Mac Compiler
Install Guide

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.

Running Compass

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.

HTML Code

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

Sprites

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.

Import images
@import "snails/*.png";
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
@include snails-sprite($name);
height: snails-sprite-height($name);
width: snails-sprite-width($name);

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
@include sprite_css(Burn-Snail-icon);
&:hover {
@include sprite_css(Turbo-Snail-icon);
}

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.

More options

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.
http://compass-style.org/reference/compass/typography/

Utilities – Provides basic mixins for common styling patterns.
http://compass-style.org/reference/compass/utilities/

Leave a Reply

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