Sassがfilterプロパティの値を短縮しちゃった話

ちょっとはまったのでメモ。

CSSのfilterプロパティを使ったときに、
コンパイルの過程でカラーコードが短縮されてた。

具体的には、
ie6（クソ）で

filter: chroma(color=magenta);

こんなコードを書いたら透過処理が入っていない。
「んー？」と思ってCSS見てみたら

filter:chroma(color=#f0f);

16進法の短縮版に変換されてた。

どうやら圧縮率によって変換される形が違うらしい。
しかもこのプロバティだけ。なんぞ。

いろいろ試した結果の一覧は下記。
※２パターン用意してみた。

* html .abc .def {
	border-bottom-color: magenta;
	filter: chroma(color=magenta);
}

* html .abc .def {
	border-bottom-color: #ff00ff;
	filter: chroma(color=#ff00ff);
}

【Expanded】

* html .abc .def {
  border-bottom-color: magenta;
  filter: chroma(color=magenta);
}

* html .abc .def {
  border-bottom-color: #ff00ff;
  filter: chroma(color=magenta);
}

【Nested】

* html .abc .def {
  border-bottom-color: magenta;
  filter: chroma(color=magenta); }

* html .abc .def {
  border-bottom-color: #ff00ff;
  filter: chroma(color=magenta); }

【Compact】

* html .abc .def { border-bottom-color: magenta; filter: chroma(color=magenta); }

* html .abc .def { border-bottom-color: #ff00ff; filter: chroma(color=magenta); }

【Compressed】

* html .abc .def{border-bottom-color:magenta;filter:chroma(color=#f0f)}* html .abc .def{border-bottom-color:#ff00ff;filter:chroma(color=#f0f)}

magentaとか書くのやめてよね～とか思いながら修正。