LESS CSS

Have you tried this? http://drupal.org/project/less

The following is CSS I wrote and use at the top of my styleshetes - [filename].css.less. Try it out and let me know what you think!

/*===================================================================
   This stylesheet uses {less}, the dynamic stylesheet language ;]
=====================================================================

PRESETS
=============================================== */
.gradient-vertical (@start: #202020; @mid: #191919; @end: #101010;) {
  background-color: @mid;
  background-image: -moz-linear-gradient(top, @start, @end) !important; /* FF3.6 */
  background-image: -o-linear-gradient(top, @start, @end) !important; /* Opera 11.10+ */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, @start),color-stop(1, @end)) !important; /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(@start, @end) !important; /* Chrome 10+, Saf5.1+ */
  background-image: linear-gradient(top, @start, @end) !important;
  filter:     e("progid:DXImageTransform.Microsoft.gradient(startColorstr=")@start e(",endColorstr=")@end e(",GradientType=0)");
  -ms-filter: e("progid:DXImageTransform.Microsoft.gradient(startColorstr=")@start e(",endColorstr=")@end e(",GradientType=0)"); }

.box-shadow (@x: 0px; @y: 1px; @blur: 5px; @spread: 0px; @r: 0; @b: 0; @g: 0; @a: .5; @type;) { /* Sensible defaults */
  box-shadow:         @type @x @y @blur @spread rgba(@r,@b,@g,@a);
  -webkit-box-shadow: @type @x @y @blur @spread rgba(@r,@b,@g,@a);
  -moz-box-shadow:    @type @x @y @blur @spread rgba(@r,@b,@g,@a);
  -o-box-shadow:      @type @x @y @blur @spread rgba(@r,@b,@g,@a);
  -khtml-box-shadow:  @type @x @y @blur @spread rgba(@r,@b,@g,@a); }

.border-radius(@tl: 5px; @tr: 5px; @bl: 5px; @br: 5px;) {
  border-top-left-radius:             @tl;
  border-top-right-radius:            @tr;
  border-bottom-right-radius:         @br;
  border-bottom-left-radius:          @bl;
  -webkit-border-top-left-radius:     @tl;
  -webkit-border-top-right-radius:    @tr;
  -webkit-border-bottom-right-radius: @br;
  -webkit-border-bottom-left-radius:  @bl;
  -moz-border-radius-topleft:         @tl;
  -moz-border-radius-topright:        @tr;
  -moz-border-radius-bottomright:     @br;
  -moz-border-radius-bottomleft:      @bl; }
  
.border-radius-all(@radius: 5px;) {
  border-radius:         @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius:    @radius;
  -o-border-radius:      @radius;
  -khtml-border-radius:  @radius; }


.rotate(@deg: -7.5deg;) {
     -moz-transform: rotate(@deg);  /* FF3.5+ */
       -o-transform: rotate(@deg);  /* Opera 10.5 */
  -webkit-transform: rotate(@deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(@deg);  /* IE9 */
          transform: rotate(@deg);  
          /* filter: progid:DXImageTransform.Microsoft.Matrix( /* IE6–IE9 */
          /*         M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand'); */
               zoom: 1; }

.transition(@which: all; @speed: 400ms; @effect: ease-out;) {
     -moz-transition: @which @speed @effect;  /* FF4+ */
       -o-transition: @which @speed @effect;  /* Opera 10.5+ */
  -webkit-transition: @which @speed @effect;  /* Saf3.2+, Chrome */
          transition: @which @speed @effect;  }

You can then call a function like so:

#someElement {
  height: 200px;
  width: 200px;
  display: block;
  .gradient-vertical();  // will use defaults
  .gradient-vertical(#f5f5f5; #f5f5f5; #f1f1f1;); // pass your own!
}

Helps me to keep things tidy and speed up development. Cheers!