カテゴリー別アーカイブ: SCSS

scss ベンダープレフィックスをまとめる


css3で追加されているborder-radiusだったり、transformだったりは、まだベンダープレフィックスを付けないと動作しない。

chrome、safariなら -webkit-
firefoxなら -moz-
IEなら -ms-
operaなら -o-

ゆえにborder-radiusを使うだけでも、以下のように、5行もcssを書く事になる。

1
2
3
4
5
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-ms-border-radius: 10px 10px 10px 10px;
-o-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;

これが面倒。非常に面倒。

これを、scssのmixinで解決してみる。
以下の様なmixinを用意。

1
2
3
4
5
6
7
@mixin border-radius($property){
  -webkit-border-radius: $property;
  -moz-border-radius: $property;
  -ms-border-radius: $property;
  -o-border-radius: $property;
  border-radius: $property;
}

そしてこのborder-raiuds()を使いたい場所でincludeして使う。

1
2
3
#id{
  @include border-radius(10px 10px 10px 10px);
}

こうやってベンダープレフィックス付きのmixinを用意しておくと、includeで呼び出すだけのお手軽使用になる!

cssの値にベンダープレフィックスが付く場合がちょっと面倒くさいんだけど・・