box_gradient

gistfile1.txt

Write this mixin once:

@mixin box_gradient($start, $end)
  background-color: $start
  background-image: -webkit-gradient(linear, left top, left bottom, from($start), to($end))
  background-image: -webkit-linear-gradient(top, $start, $end)
  background-image: -moz-linear-gradient(top, $start, $end)
  background-image: -ms-linear-gradient(top, $start, $end)
  background-image: -o-linear-gradient(top, $start, $end)
  background-image: linear-gradient(top, $start, $end)
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$start}', EndColorStr='#{$end}')

So then when I type:

a
  @include box_gradient(#EEE, #FFF)

It renders like this:

a {
  background-color:#eeeeee;
  background-image:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#eee));
  background-image:-webkit-linear-gradient(top, #eee, #eee);
  background-image:-moz-linear-gradient(top, #eee, #eee);
  background-image:-ms-linear-gradient(top, #eee, #eee);
  background-image:-o-linear-gradient(top, #eee, #eee);
  background-image:linear-gradient(top, #eee, #eee);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#eeeeee');
}

KA-CHOW!