Use lesscss (See related posts)

Source: LESS - Leaner CSS [lesscss.org]

<snip>The LESS Ruby gem compiles LESS code to CSS. To install:</snip>

*Installation*

sudo gem install lesscss

james@karmic:~$ sudo gem install less
Successfully installed polyglot-0.2.9
Successfully installed treetop-1.4.2
Successfully installed mutter-0.5.0
Successfully installed less-1.2.11
4 gems installed
Installing ri documentation for polyglot-0.2.9...
Installing ri documentation for treetop-1.4.2...
Installing ri documentation for mutter-0.5.0...
Installing ri documentation for less-1.2.11...
Installing RDoc documentation for polyglot-0.2.9...
Installing RDoc documentation for treetop-1.4.2...
Installing RDoc documentation for mutter-0.5.0...
Installing RDoc documentation for less-1.2.11...

*Program execution preparation*
+ Using Ubuntu you need to find the 'less css' binary e.g. find -iname / less
Then either add the path to your shell environment variable or alias it, link to it using a symbolic link, simply copy the binary into a designated directory, or execute the binary from it's binary location.

I prefer to alias it e.g. alias lessc=/var/lib/gems/1.9.1/bin/lessc <-- placed within .bash_aliases for convenience.

*program execution*

lessc before_css.less && mv before_css.css after_less.css

file: before_css.less

/* -- start of variables --*/
@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}
/* -- end of variables --*/

/* -- start of mixins --*/
.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}
/* -- end of mixins --*/

/* -- start of nested_rules --*/
#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}
/* -- end of nested_rules --*/

/* -- start of operations --*/
@the-border: 1px;
@base-color: #111;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}

#footer { 
  color: (@base-color + #111) * 1.5; 
}
/* -- end of operations --*/

file: after_less.css

/* -- start of variables --*/
#header, h2 { color: #4d926f; }
/* -- end of variables --*/

/* -- start of mixins --*/
.rounded_corners, #header, #footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
/* -- end of mixins --*/

/* -- start of nested rules --*/
#header { color: red; }
#header a {
  font-weight: bold;
  text-decoration: none;
}
/* -- end of nested rules --*/

/* -- start of operations --*/
#header {
  color: #333333;
  border-left: 1px;
  border-right: 2px;
}
#footer { color: #333333; }
/* -- end of operations --*/

Note: All your commented css including helpful comments will be removed after the conversion from less to css.