Scss + Compassのセットは、かなり使いやすい。
特に、Compassはクロスブラウザ対応のmixinを纏めてくれているので、複数人で作業するときはとても重宝する。しかしながら、Compassのmixinでは対応できない案件もあったりする。

その代表例が不透明度を操作するopacity

今回は、Commpassのopacityをmixinで書き直してみる(正確には上書きしてみる)。


scssの記述

[sass]
//↓Compassでの記述
.test{
@include opacity();
}

//↓オリジナルのmixinでopacityを上書き
@mixin opacity($opacity:0.8) {
opacity: $opacity;
-moz-opacity: $opacity; // Mozzila
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(opacity=#{$opacity * 100})”;// ie 8
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=#{$opacity * 100});// ie lt 8
zoom:1; // for ie filter
}
[/sass]


コンパイル後のcss

[css]
//compassオリジナルの出力
.test {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
}

//上書き後の出力
.test2 {
opacity: 0.8;
-moz-opacity: 0.8;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(opacity=80)”;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
zoom: 1;
}
[/css]

mixinのopacityが無事に上書きされた。よしよし。

  • 2015/01/15
  • 30
  • 0

関連記事

コメントを残す