SCSSのmixinで背景グラデーションを出力しようとしたらうまくいかなかったこと

SCSSのmixinで背景グラデーションを出力しようとしたときにうまくいかなかったのでメモ。

普通にmixinの変数を利用して、
ColorZillaのグラデーションジェネレータのCSSを参考にこんな感じで書いてたんだけど

@mixin bgGrad($gradColStr, $gradColEnd) {
	background: $gradColStr;
	background: -moz-linear-gradient(top, $gradColStr 0%, $gradColEnd 100%);
	background: -webkit-linear-gradient(top, $gradColStr 0%, $gradColEnd 100%);
	background: linear-gradient(to bottom, $gradColStr 0%, $gradColEnd 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$gradColStr',endColorstr='$gradColEnd',GradientType=0);
}

.heading {
	@include bgGrad(
		$gradColStr: #FF0000,
		$gradColEnd: #000000
	);
}

これで出力されたCSSを見たら

.heading {
	background: #FF0000;
	background: -moz-linear-gradient(top, #FF0000 0%, #000000 100%);
	background: -webkit-linear-gradient(top, #FF0000 0%, #000000 100%);
	background: linear-gradient(to bottom, #FF0000 0%, #000000 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$gradColStr',endColorstr='$gradColEnd',GradientType=0);
}

IE用のfilterに書いた変数がちゃんと出力されてなかった。
引用符で囲んでるから出てこないのかなーと思って、取ってみたけど変わらず。

いろいろSCSSの書き方ってのを見ているうちに、
「指定した色を、IE独自実装のfilterプロパティで利用できる形式に変換」するっていうのを見つけて、
あてはめてみたらうまくいった！

改訂版がこちら

@mixin bgGrad($gradColStr, $gradColEnd) {
	background: $gradColStr;
	background: -moz-linear-gradient(top, $gradColStr 0%, $gradColEnd 100%);
	background: -webkit-linear-gradient(top, $gradColStr 0%, $gradColEnd 100%);
	background: linear-gradient(to bottom, $gradColStr 0%, $gradColEnd 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($gradColStr)}',endColorstr='#{ie-hex-str($gradColEnd)}',GradientType=0);
}

↓

.heading {
	background: #FF0000;
	background: -moz-linear-gradient(top, #FF0000 0%, #000000 100%);
	background: -webkit-linear-gradient(top, #FF0000 0%, #000000 100%);
	background: linear-gradient(to bottom, #FF0000 0%, #000000 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFF0000',endColorstr='#FF000000',GradientType=0);
}

（filterはhexの頭に「FF」を付けないといけない模様。）

一応、compassのmixinではどう記述されているかも調べてみたら、
filter用にやっぱり「ie-hex-str()」は使っている模様。