Compass：IEにも対応したCSSグラデーションの書き方

Compassでザックリ書き出す方法です。

Scss

//SVGサポートを有効に（IE9用）
$experimental-support-for-svg: true;

.box {
    //モダンブラウザ用グラデーション
    @include background-image(linear-gradient(top, #ccc, #333));
    //IE独自filterプロパティのグラデーション
    @include filter-gradient(#ccc, #333, vertical);
}

出力されるCSS

.box {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(100%, #333333));
  background-image: -webkit-linear-gradient(top, #cccccc, #333333);
  background-image: -moz-linear-gradient(top, #cccccc, #333333);
  background-image: -o-linear-gradient(top, #cccccc, #333333);
  background-image: linear-gradient(top, #cccccc, #333333);
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFCCCCCC', endColorstr='#FF333333');
}

IE用のめんどくさい記述はCompass使って楽しましょう。