SCSS – Compiled CSS

At work this year, we started using SCSS, which uses a Ruby program, compass to compile stylesheets. This helps convert 8 different style sheet sets int one minified script – but most importantly, it helps with the speed of development.

Easier to Categorize and Add / Edit CSS

SCSS cascades your style sheets further than what is involved in normal css. Good CSS tends to be specific CSS, and when you get specific, you get many many descriptors, divs, and classes deep on any given line. It makes it a lot easier to find your content section and find all tags underneath it than to search through your CSS (which many developers may cascade incorrectly or add to on the fly and therefore be out of order).

Searching also becomes substantially easier with the implicit requirement to order. You can now search sections of code for the specific class or tag that you are looking to change the style for.

So yes, nesting is great.

Your’re Minifying Anyway

On Monday, I heard an argument that you shouldn’t have any code on your server that you can’t change quickly and on the server if necessary. I don’t really agree with that much at all, but the key when it comes to CSS is that you are compiling it anyway if you’re running any sort of high access application – you’re minifying it so that it transfers faster – and hopefully, it renders faster too.

Check it out

It’s easy to get, especially if you already have Ruby installed (or have a current Mac) simply “sudo gem install compass” and read some howtos on setting up your directories. You can then use “compass compile” in your directory structure – or you can set up a listener for changes (which you could setup on your live server if you want.)

Other features

Variables are another great feature. It can become a lot easier to specify a color template or a collection if you can set colors or attributes up with variables. Then, a few line changes at the top of your SCSS will be put in their respective place. Anybody who has developed in PHP or other server side languages has either done this or wanted to do this with their css.