A couple of weeks ago I starting reading about Compass. They define themselves as a CSS framework that makes your stylesheets and markup easier to build and maintain.
We’ve previously seen frameworks like 960.gs, Blueprint, etc. And even though they do make you build styles and markup faster, you have to add visual styles and classes to your html. Which takes us back to the original problem: We’re mixing layers that shouldn’t be mixed.
So, what is Compass then? and how is it different to all the other frameworks?
Simply put, Compass is extends of CSS. By using Sass, you can create variables, extend defined properties, re-use code, nest selectors and properties, and more.
That’s cool, but what else does can I do with it?
Not only it gives you access to all this new features, you can also use your favorite grid framework to semantically design your page. Compass is able to extend a selector using another selector. It’s easier to see it than to explain it:
With this code, we just made copied all the properties from .grid_12 to the #main-content element. Imagine all the possibilities that this single feature brings you!
How does it work? What’s the magic behind Compass?
Compass runs under Ruby and you can install it very easily as a gem. After writing the code, it is compiled by Ruby and it generates a normal CSS file. Don’t worry about having to compile all the time, there’s an automated function for that.
What are the benefits? and what’s the catch?
So far I haven’t found any catches. You can use only the core of Compass if you’re the type that likes coding everything form scratch. It is totally compatible with regular CSS code, so if you simply use the CSS you write everyday, it will work as usual. Whenever you feel the need to use a variable, or you need to reuse part of your code, just use Compass/Sass code… It’s totally useful.
These are just some of the cool things you get from Compass.
- Write reusable code: You don’t have to write all the properties every time you want a similar box, simply extend it or have it in a mixin. Imagine having all the different versions for border radius in one simple call. @include border-radius(5px); //done
- Math operations: Yes, you can + - / * using variables and/or static numbers. Imagine being able to calculate your columns width automatically by only having the total width and the number of columns…
- One line comments: This is one of my favorite features, you have one line comments now!!! Woot!. //This is a comment and won’t be evaluated
- Compile compressed CSS files: You can have the files created for different environments: Debug, development, production, etc. When you compile it for production, it compresses the heck out of the file and gives you a minimized version.
- One call CSS3 properties: You can have all the different version of the new css3 properties in one call. AND have a default way to handle the case for old/unsupportive browsers.
- Colors Operations: You can execute modifiers for colors: opacify, transparentize, lighten, darken, saturate, desaturate, adjust hue, mix two colors, get the gray scale version and get the complement. Imagine having three different kinds of buttons with three different colors and you’ll figure out how this comes handy.
- Variables: Imagine having a color palette for your site and being able to simple put the color values in variable, and reuse the variables all over the code. Changing one color of the palette would be super easy.
- Automatic RGBA colors: Compass automatically generates the RGB values for colors entered the regular way:
color:rgba(#ff0000,0.5); => color:rgba(255,0,0,0.5);
SEO & Speed benefits:
- Compressing & Packing multiple CSS files: Since recently, search engines are using loading speed as a rank factor. One of the main factors that slow down your website is loading multiple external files. The more you load the slower it gets. This is not because of the file size, it’s because of the HTTP call the client has to make for each file.
Compass compresses multiple files into only one file, including your reset styles, typography styles, layout styles, etc. You can have it divided in as many files as you want, but when it compiles, it puts it into one single file. And if you’re running on a production environment, it will remove comments, unnecessary spaces, line breaks, etc.
- Automatic sprite images using Lemonade: I haven’t mentioned lemonade so far, but it allows you to create sprite images without doing anything! Simply say what images you want to include in the sprite, and it automatically creates the image for you and the spacing necessary.
I put this under SEO because this technique reduces big time the number of HTTP calls, loading your website a lot faster.
I had a couple of pitfalls while trying to use Lemonade, but I got it up and running fine now. So send me a message if you’re having problems, I can help you figure it out.
What do you think of Compass now? Isn’t it super cool?
Go to the Compass home page, they have a really cool video that explains all this better. Their documentation is still not very good, but you’ll be able to figure out most of the tricks.
Also the Lemonade home page has some pretty cool examples that will blow your mind!
What do you think? What framework are you currently using? Do you hate Compass and all the other frameworks in the world? Did you learn something new? I want to hear it!