I've worked as a UI developer for 12 years now and I wouldn't go near something like this because there is no value. At least the server side version you can pre-process and package up for live after your developers have saved literally minutes by using it. You need to know CSS inside out, so you have to then unlearn and relearn different parts just to do something you can already do with find + replace.
And worse, you are even including and downloading files that the browser cannot even interpret itself without relying on another download of JavaScript as well, so you're giving something that works 100% of the time (assuming someone has CSS on) another point of failure. Most of my time in UI has been in public sector education trying to push standards and quality from various suppliers to the Govt and seeing things like this from said suppliers (I've seen worse to be fair, but I've seen something like this before) is always an unpleasant experience.
Lots of developers will tell you that it's fine to use systems like the 960 Grid System for rapid prototyping, but you shouldn't use them for final, "production" sites. Their argument is that "littering" your code with classes like "grid_4", etc. is not semantic (and they're right).
So here's what I would love to do: use a system like 960 in development, but instead of using names like "grid_4", use actual, semantic names. But behind the scenes, I'll use less to "inherit" the grid_4 properties into the semantic name.
E.g., assuming I have: "<div class="grid_4 article_header>", I'll remove grid_4, but use less to make "article_header" inherit grid_4's properties. That way my html remains semantic, but I get the full power of systems like 960.gs.
.class-name .clearfix font-size: 1.2em
There are other ways to do it like one long string of selectors followed by the clearfix code, but they're not as convenient or readable.
For one example, you can define "constants". That means you can define a color once with a name (say, LINK_COLOR = #aaa), then use that name over and over. Then, if you ever feel like changing that color, you only have to change it once (where it says LINK_COLOR = ), not every time.
Other benefits are something akin to "functions", and ways of "nesting" your CSS which automatically makes certain classes only apply to nested elements (this is something most people do anyway, they just do it by hand).
Basically, it's not really about reducing syntax or size of the file (which does get smaller for large stylesheets), it's all about making the stylesheet easier to build and maintain.
For example, if you want to make an inline list it's as easy as:
li +inline-list