続・Sass で 出力スタイルを compressed にするとカラーコードが3桁に短縮されて困った話

Sass で 出力スタイルを compressed にするとカラーコードが3桁に短縮されて困った話」で、IE の Filter で指定する色の形式が意図したものにならないということを書いたのですが、解決策が見つかりました。

Sass のドキュメントを見ると、ie_hex_str() というそのままな関数が用意されており、これを使えば OK でした。

@mixin linear-gradient($topColor, $bottomColor) {
  background-image: -moz-linear-gradient(top, $topColor, $bottomColor);
  background-image: -webkit-gradient(linear, left top, left bottom, from($topColor), to($bottomColor));
  @if $css3-ie-support == 1 {
    $ieTopColor: ie_hex_str($topColor);
    $ieBottomColor: ie_hex_str($bottomColor);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#{$ieTopColor}', endColorstr='#{$ieBottomColor}'); // IE6 & IE7
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#{$ieTopColor}', endColorstr='#{$ieBottomColor}')"; // IE8
  }
}

まぁ、linear-gradient については、クロスブラウザな css3 linear-gradient が面倒になりそうな件について – ほむらちゃほむほむ といった話もあるので、mixin を自作するよりも、素直に CompassBourbon を使ったほうがいいかもですね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>