lessについての記事です。
ie8以下へ不透明度の指定をスムーズに行なうため、よく使うopacity廻りのcssをless化しました。

cssで動きをつけていると何度も登場するopacity。ie8以下に対応する時いつもつまづくopacity。じゃぁ、ie6~8対応のopacityを作って、mixin.lessに入れておけばいいじゃない・・・ということで作ってみたのですが、使い始めたら手放せなくなってしまった。
※IE8以下の対応が要らない時は、mixin.lessのIE対応部分の記述を消せばいい。

以下より、コード記載。

mixin.less

[css]
// Opacity IE6+

.opacity(@opacity:0.7;) {
opacity: @opacity;
@opacity-ie: (@opacity * 100);
-ms-filter: "alpha(opacity=@{opacity-ie})";// ie 8
filter: ~"alpha(opacity=@{opacity-ie})";// ie lt 8
zoom:1; // for ie
}
[/css]

styles.less

[css]
//数字の記述をしないと不透明度は0.7に設定

.hoge{
.opacity();
}

//不透明度を0.9にしたい場合

.hoge{
.opacity(0.9);
}
[/css]


opacity恐怖症克服!

  • 2013/10/03
  • 31
  • 0

関連記事

コメントを残す