the point
the point of these languages (i prefer, however frameworks or extensions) of css is to incorporate your workflow to your css saving you time. How?
Let's imagine, that you have div with class some-long-class-to-be-sure-what-it-does and that div has h3 child, p child, .some-other-class child and something else (span child).
Now, if you want to style all of them, you have to do something like this:
.some-long-class-to-be-sure-what-it-does { width: 120px; }
.some-long-class-to-be-sure-what-it-does h3 { font-size: 20px; }
.some-long-class-to-be-sure-what-it-does p { margin-bottom: 30px; }
.some-long-class-to-be-sure-what-it-does .some-other-class { width: 120px; }
to inform browser about (i.e.) only h3 of .some-long-class-to-be-sure-what-it-does has font-size: 20px;.
with most of these parsers/frameworks, you have (still just an example) nesting at hand:
.some-long-class-to-be-sure-what-it-does {
width: 120px;
@ h3 { font-size: 20px; }
@ p {
margin-bottom: 30px;
@ .subclass { color: red; }
}
@ .some-other-class { width: 120px; }
}
which gives you smaller css, easier to edit in a long run (this is subjective, you may find it's harder for you to work with).
Also, they extend css in other ways besides nesting: constants (assign something to @col1 and use it on three places, then you decide, that you need something lighter... bam! you edit it once), flags, output formatting and many more, so I guess you will find your way of using it.
how to us it
mostly, you don't install it on your PC, but rather on your server. Instead of classic CSS, you link your site with installed CSS parser/framework/language, which on every call calculates (or will use cached version if avalaible) normal css - but when you edit it, you edit simplified/extended version of your css.
Edit: you don't install it onto your PC as a USER, but you need to install it into your developing enviroment. If it's localhost on your PC, then yes, you install it in your PC - but not as a user, but on your locally running server.
Ruby?
I think, that for ruby, these extensions to css were first. But now you can find it for other languages aswell - I, as PHP programmer, have found Anthony Short's CSScaffold:
github with little description
http://github.com/anthonyshort/csscaffold
scaffold's website, currently offline
http://scaffoldframework.com/
edit: what's it's use?
In that try example you see counting with multiple constant. that way, if you change !sidebar from 200px to 300px, every part of your css recalculates with it. every place this constant is mentioned, wheter by itself or in calculation.
another:
SASS in .NET - http://stackoverflow.com/questions/1049433/better-css-in-net/1049548#1049548
less css in .NET - http://www.dotlesscss.com/