StylusでOldなIEにも対応したOpacity

こんなやつをMixinで書きたい

css

a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}

通常運転でMixin書こうにも、途中でコロンで区切られてたり、最後は関数になってたりと色々課題が多い。

stylus

opacity(val)
  filter progid:DXImageTransform.Microsoft.Alpha(Opacity=val * 50);
  opacity val

a
  &:hover
    opacity(0.5)

調べたら、やりたいことそのまま公式に書いてあった。
unquote()を使用するといいらしい。
この例では変数でIEのサポートも管理してくれていて大変便利だと思った。

stylus

support-for-ie ?= true

opacity(n)
  if(support-for-ie) {
     filter unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + round(n * 100) + ')')
  }
  opacity n

a
  &:hover
    opacity(0.5)

css

//出力結果
a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}