“Compass is an open-source CSS Authoring Framework.” – Compass
“Compass can do some really handy tasks like measuring images from the filesystem and writing them into your stylesheets. Asset URL functions are available that make it easy to move assets around in a project or even switch to a content delivery network (CDN) without having to rewrite your stylesheets. Compass can even combine a directory of images into a single sprite image and do the otherwise tedious task of calculating coordinates and writing the spriting CSS for you.” – Sass and Compass in Action (Manning)
Some of the features of Compass I’ll be covering are:
CSS3
From my previous blog post, I used an example of a mixin for a box with a border-radius. This time instead of re-writing the prefixes seen below;
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
We can use the Compass mixin called border-radius.
For example:
Play with this gist on SassMeister.
http://static.sassmeister.com/js/embed.js
And we can define the 10px in the parentheses when you include the mixin.
Image Sprites
Instead of having to use your preferred image editor to create your image sprite, Compass can do this for you. Simply throw in your icons into a specific folder and let the Compass Sprite utility, create the sprite and calculate the CSS positions for you. Another feature is that Compass also recognizes the hover state of your image by simply saving your image, eg. facebook_hover.png
The following excerpt is from the Spriting with Compass reference page
Basic Usage
**Note: The use of social is only for this example, “social” represents the folder name that contains your sprites.
The simplest way to use these icon sprites is to let compass give you a class for each sprite:
In your SCSS file, add the following:
@import "compass/utilities/sprites"; @import "social/*.png"; @include all-social-sprites;
And you’ll get the following CSS output:
.social-sprite,
.social-facebook,
.social-linkedin,
.social-twitter,
.social-youtube {
background-image: url('../img/social-sf14878b932.png');
// the name of your generated sprite image will be different
background-repeat: no-repeat;
}
.social-facebook {
background-position: 0 0;
}
.social-facebook:hover, .social-facebook.facebook-hover {
background-position: 0 -80px;
}
.social-linkedin {
background-position: 0 -160px;
}
.social-linkedin:hover, .social-linkedin.linkedin-hover {
background-position: 0 -240px;
}
.social-twitter {
background-position: 0 -320px;
}
.social-twitter:hover, .social-twitter.twitter-hover {
background-position: 0 -400px;
}
.social-youtube {
background-position: 0 -480px;
}
.social-youtube:hover, .social-youtube.youtube-hover {
background-position: 0 -560px;
}
This results in one single sprite image:
You can now apply the social-your-class-name to your HTML as needed.
As stated earlier, the Sprite utility also recognizes if your icon requires a hover state. So add your hover state icons in the social folder (within your images folder).
Be sure to add in your “config.rb file” the location of your main images (root) folder.
Once you save the changes, the new sprite image will re-generate to include the hover state icons and thus your output CSS will also be updated. It is pretty amazing!
Font Face
The Compass Font Face provides a mixin to support @font-face. See CSS3 spec: @font-face.
This file can be imported using: @import “compass/css3/font-face”
Use the mixin font-face($name, $font-files, $eot, $weight, $style)
Where:
- $name is required, arbitrary, and what you will use in font stacks.
- $font-files is required using font-files(‘relative/location’, ‘format’). for best results use this order: woff, opentype/truetype, svg
- $eot is required by IE, and is a relative location of the eot file.
See the Compass reference page for more details on this mixin and the use of $weight and $style.
For this example, I’m using the font called “TeXGyreHerosCnBold”.
In your SCSS file, add the following:
@include font-face("TeXGyreHerosCnBold",
font-files(
"texgyreheroscn-bold-webfont.ttf",
"texgyreheroscn-bold-webfont.eot",
"texgyreheroscn-bold-webfont.svg",
"texgyreheroscn-bold-webfont.woff")
);
Then assign your font, eg. h1, h2:
h1, h2 {
font-family: "TeXGyreHerosCnBold", Helvetica, sans-serif;
}
Add your fonts to the fonts folder and define the location of your fonts in the config.rb file, fonts_dir = “fonts”. This is the directory where the font files are kept. Standalone projects will default to “css_dir/fonts”. Rails projects will default to “public/fonts”.
Extending Compass
There are quite a number of Sass and Compass resources but I want to mention, Sache. As the site says “Find the perfect tool for your next Sass or Compass project. Discover Sass & Compass Extensions”. There are plenty of Sass and Compass extensions/plugins listed on the site and I’ll be writing a future blog post about using Susy (a semantic grid framework) as well as Breakpoint Sass (a plugin for media queries).
So hopefully I’ve convinced you to use or at least try out Compass with your next Sass project!
Adeline Yaw - Happiness Engineer @ Automattic 