Blog
Whilst working on client projects we often find useful bits of information out. Where possible we blog about that information to pass on our knowledge. Below are some of our most recent entries.
SASS, Compass and some clarity
Having recently read HOW TO: Get Started With the COMPASS CSS Framework, I realised there is still a lot of confusion about SASS and Compass and why developers should be using them. The Mashable article is very brief and the comments below it highlight show some of the confusion surrounding the tools.
My issue with the article is that it really talks about SASS and not Compass, it doesn't even show one example of the CSS3 features and it doesn't explain the separation between the two and the benefits of using them.
Hopefully in this post I want to try and clear up what SASS is, what Compass is, and why, as a developer, you should let them into your life. This post won't go into detail about each tool, but will hopefully just give you enough of a push to investigate further. The post will also try and deal with some of the common misconceptions I've heard and read from other developers.
What is SASS
SASS is simply an extension to existing CSS features. Some of the main features include:
- Variables
- Mixins
- Nesting
- Selector Inheritance
Some of features are so useful that they are being proposed to the CSS Working Group - CSSOM, Vars, Mixins, Nesting, and Modules.
Other useful features include:
- Control Directives (if, for, each, while)
- Colour operators
- Colour functions (incredibly useful for tweaking your colour palette)
Some developers originally ignored SASS because it used a different syntax to CSS, but a while ago this all changed with the release of the SCSS format. SCSS uses the exact same formatting as standard CSS, so if you can write CSS, you can write SCSS.
SASS isn't the only tool that extends the capability of CSS, however once you add in the power of Compass it should be clear why developers should be choosing SASS above the other tools.
What is Compass
Compass is an open source CSS authoring framework that makes a developer's life much easier.
If you want a simpler way to maintain your grid layouts, an easier way to remember all the variations in CSS3 syntax, and a way to reuse lots of standard CSS patterns quickly, then Compass is for you.
Compass is built on top of SASS, so you get all the benefits of SASS as well.
At it's most simplistic level, Compass provides a huge amount of mixins that developers can use of to reduce the maintenance of their CSS.
Some of the main features of Compass include:
- Cross browser CSS3 mixins (stop trying to remember all those CSS3 browser variations)
- Common typography patterns
- Common styling patterns
- Built in spriting capabilities
- Blueprint module
Compass also has a number of plugins that can be added to the core features to give you even more to simplify your CSS. Some of the plugins are listed here, however doing a quick search on github will reveal quite a few more.
Misconceptions
"But I don't want to use Rails"
This is a pretty common argument for not using SASS or Compass. Yes, SASS and Compass rely on Ruby, but you don't have to be using Ruby on Rails to use them. They are completely stand-alone tools and I've even used them when developing simple static pages. The only thing you do need is Ruby, as they are Ruby gems. The download page of the SASS site explains how to do that.
"But I don't want to install Ruby on my server"
Don't then. Yes, you do need Ruby on your development machine, but that's as far as you need to go. SASS compiles down to bog standard CSS so all you actually need to put onto your server is the generated CSS files.
"I don't like SASS, I prefer LESS"
In the Mashable article, one of the comments compares LESS and Compass. They are two completely different things. Sure compare LESS and SASS, but LESS and Compass are not comparable.
"But I can write proper CSS from scratch, I don't need something to do that for me"
As web developers we can all do that, but the point is that SASS and Compass offer us a way of writing more manageable code. I can guarantee you that when using these tools, you will be writing less code, changes will be quicker and easier, and therefore cheaper.
Additional reading
This blog post deliberately doesn't show many code examples, as there is just too much to cover. If you want to see some more specific examples, here are some useful references.
- SASS and Compass
- Style Guides Using Sass @extend
- SASS selector inheritance
- Cleaner 960.gs using SASS and Compass
Finishing up
So in short, SASS and Compass are here to make CSS creation and maintenance simpler and quicker, leaving you with time to do other things to make your sites even better.
This post doesn't even scratch the surface of the capabilities of SASS and Compass, but hopefully it explains what they are and gives you a hint as to why you be using them as part of your development stack.
The big question is do you want to be maintaining code that looks like this?
.box-shadow-example div {
width: 40px;
height: 40px;
background: #eeeeee;
margin: 20px;
float: left;
}
#box-shadow-default {
-moz-box-shadow: 0px 0px 5px #333333;
-webkit-box-shadow: 0px 0px 5px #333333;
-o-box-shadow: 0px 0px 5px #333333;
box-shadow: 0px 0px 5px #333333;
}
#box-shadow-custom {
-moz-box-shadow: red 2px 2px 10px;
-webkit-box-shadow: red 2px 2px 10px;
-o-box-shadow: red 2px 2px 10px;
box-shadow: red 2px 2px 10px;
}
#box-shadow-custom-multiple {
-moz-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;
-webkit-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;
-o-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;
box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;
}
Or like this?
@import "compass/css3";
.box-shadow-example div {
width: 40px;
height: 40px;
background: #eeeeee;
margin: 20px;
float: left; }
// Default single box shadow
#box-shadow-default {
@include single-box-shadow; }
// Box shadow with custom settings
#box-shadow-custom {
@include box-shadow(red 2px 2px 10px); }
#box-shadow-custom-multiple {
@include box-shadow(rgba(blue, 0.4) 0 0 25px, rgba(green, 0.2) 0 0 3px 1px inset); }
Read more entries
Keep up to date
Want to find out more?
If we have piqued your interest then we'd love to hear from you.