Playing with Less

main.less

// jellybeans
@opacity: 1;

@black-jellybeans:    rgba(59,59,59,@opacity);       // #3b3b3b
@red-jellybeans:      rgb(207,106,76,@opacity);      // #cf6a4c
@green-jellybeans:    rgba(153,173,106,@opacity);    // #99ad6a
@yellow-jellybeans:   rgba(216,173,76,@opacity);     // #d8ad4c
@blue-jellybeans:     rgba(89,123,197,@opacity);     // #597bc5
@magenta-jellybeans:  rgba(160,55,176,@opacity);     // #a037b0
@cyan-jellybeans:     rgba(113,185,248,@opacity);    // #71b9f8
@white-jellybeans:    rgba(173,173,173,@opacity);    // #adadad

// the palette to use
@palette: "jellybeans";

@color-black:   "black-@{palette}";
@color-red:     "red-@{palette}";
@color-green:   "green-@{palette}";
@color-yellow:  "yellow-@{palette}";
@color-blue:    "blue-@{palette}";
@color-magenta: "magenta-@{palette}";
@color-cyan:    "cyan-@{palette}";
@color-white:   "white-@{palette}";

@black:   @@color-black;
@red:     @@color-red;
@green:   @@color-green;
@yellow:  @@color-yellow;
@blue:    @@color-blue;
@magenta: @@color-magenta;
@cyan:    @@color-cyan;
@white:   @@color-white;

.column1 {
  background-color: @blue;
}

.column2 {
  background-color: @red;
}

.column3 {
  background-color: @yellow;
}

.background-opacity(@color, @opacity) {
  @rgba-color: rgba(red(@color), green(@color), blue(@color), @opacity);
  background-color: @rgba-color;

  // Hack for IE8:
  background: none\9; // Only IE8
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color),argb(@rgba-color))); // IE9 and down
  // Problem: Filter gets applied twice in IE9.
  // Solution:
  &:not([dummy]) {
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); // Only IE9
  }
}