Compass(sass)でCSSグラデーションを楽に書く

CSS3のグラデーションはブラウザごとの表示仕様が異なり、ベンダープレフィックスの付与が結構面倒です。
Compassで用意されている標準mixinを使うことで一括で出力できます。

Sassの記述は下記になります。

$red: #f00;
.box {
    @include background-image(linear-gradient(top, lighten($red,30), $red));
    @include filter-gradient(lighten($red,30), $red, vertical); //IE用の記述
}

グラデーションは暗い色から明るい色に変化するパターンが多いと思うので、ベースカラーに lighten をかける使い方がおすすめです。

CSSで下記のように出力されます。

.box {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff9999), color-stop(100%, #ff0000));
  background-image: -webkit-linear-gradient(top, #ff9999, #ff0000);
  background-image: -moz-linear-gradient(top, #ff9999, #ff0000);
  background-image: -o-linear-gradient(top, #ff9999, #ff0000);
  background-image: linear-gradient(top, #ff9999, #ff0000);
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFF9999', endColorstr='#FFFF0000');
}

後半2行は filter-gradient によるIE用の記述です。