Compassの落とし穴：グラデーションにsvg出力を行わせない

CompassでCSSグラデーションを描く際は下記のように記述します。

@include background-image(linear-gradient(#fff, #ccc));

これをコンパイルするとCSSには下記のように出力されます。

background-image: url('data:image/svg+xml;base64,～省略～');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #cccccc));
background-image: -moz-linear-gradient(#ffffff, #cccccc);
background-image: -webkit-linear-gradient(#ffffff, #cccccc);
background-image: linear-gradient(#ffffff, #cccccc);

出力結果の1行目はCSSグラデーションが正常表示されないブラウザ向け（主にIE）のためdataスキームによるsvgイメージ表示になりますが、これが対応していないIE7かつSSL環境のサイトで利用した場合、IE7がセキュリティアラートを表示してしまいます。

なのでCompass標準のmixinに頼らず、自分でmixinを作ってしまいましょう。

@mixin gradient($start:#fff, $end:#ccc) {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, $start), color-stop(100%, $end));
  background-image: -moz-linear-gradient($start, $end);
  background-image: -webkit-linear-gradient($start, $end);
  background-image: linear-gradient($start, $end);
}

使う時は下記のような記述で。

@include gradinet(#eee, #999);

余談

調べたところ1年ほど前までは下記の変数定義でsvg出力を止めることが出来たようですが、今はできなくなっているようです。（むしろデフォはfalseで、自分でtrueにする必要があった）

$experimental-support-for-svg: false;