Which Vendor Prefixes are needed?
If you are thinking that you could simply concatenate all your CSS together, replace variables with sed, then minify it, then you are thinking along the same lines as Hampton Catlin, Nathan Weizenbaum and Chris Eppstein - the developers of SASS.
I can safely say that I will never write vanilla CSS ever again.
SASS runs on your development machine and turns .scss files into .css. You then upload the .css files to the server, and use them as usual. This is nice as it makes moving to and from SASS very easy - if you decided to stop using SASS, you could just use the generated .css and forget about the .scss. The other benefit is that .css is valid .scss, making it trivial to start using.
It's worth pointing out that though SASS is written in ruby, ruby doesn't need to be running on your server, only on your local machine. For most people, you'll find ruby is built in to your machine, but if you are using Windows you'll need to install ruby first.
In short, SASS provides some new functionality: variables, nesting, mixins as well as a number of convienience features. Here's quick walkthrough of how a project might look like.
As a quick example of what a project might look like, make a folder somewhere called css. In there make a file called style.scss, and one called _constants.scss. The underscore means that SASS won't compile it into a new CSS file of it's own. In SASS this is called a 'partial'.
$accent-color: darken($brand-color, 10); // That is, 10% darker than the brand-color.
in your shell. There are also loads of apps to do this for you if you can't type into command lines. For example CodeKit looks brilliant for OSX.
For production use, you'll want to change extended to compressed - this strips all the linebreaks.
This command causes SASS to sit and watch all your .scss files in your css folder, and compile then into .css files in the same folder. This likely fits what you want to do. You can now just save your .scss files, and the .css file will be updated. If you mess something up, SASS will show a load of errors so you can see what went wrong with your syntax. In your webpage, you'd just link to the style.css file it creates as if you had written it yourself.
There are a number of things to notice here. Firstly, this is just one CSS file, being produced from two. Secondly, my variables have been filled in with the appropriate values. You'll notice that SASS has changed the rgb(255,0,0) value into 'red'. That was nice of it. I can now use rgb and hsl wherever I like, whilst guaranteeing that it will work in all browsers. I also wanted a darker version of that color. That doesn't have a name shorter than 7 characters, so it's simply outputted as #cc0000. Thirdly, SASS has flattened my nested statement into two statements, and finally, the calculation I put in has been evaluated.
There are two main things here - mixins and extend. Mixins are essentially snippets of CSS that can have parameters. The one I have here is one I wrote to include CSS gradients that are cross browser compatible. It takes four parameters, with the last one for using CSS3PIE turned off by default (I have never had much luck and generally use a png of the gradient generated in PHP on the fly instead for old browsers).
Below that, I made a class definition with a gradient. That is going to produce loads of code, so ideally I only want that in my CSS once. Below I have two divs that have the same gradient. By using @extend, I can give them that gradient without having to repeat the gradient. I could do that in normal CSS by hand, but this lets me keep things logically arranged without much hassle. When the syntax changed from the first gradient declaration here, I was able to change my mixin once, then deploy all my sites which have a symlinked file with my mixins in, meaning I could keep up with experimental syntax on multiple client sites without any hassle.
This is just scratching the surface - SASS also has loops, loads of useful functions, such as darken, demoed above, and many other features. Chris Eppstein has also created Compass, essentially a collection of awesome mixins that supplement SASS - meaning that you can dive straight in to a new world where CSS is fun again!
Use SASS? Written an article about it? Comments are below!
Please add any questions/corrections/extra info below. Please be courteous to other users.
To make as easy as possible, I'm putting style and script tags in each section, just before the demo. This isn't recommended for production use!
Any suggestions/improvements/etc, contact me via my Gmail account (rich.bradshaw), or on Twitter (richbradshaw).