ベンダープレフィックスを簡略的に出来るSCSSの@mixinのテクニック

Tweet

239

CSSのベンダープレフィックスってめんどくさくないですか？
SCSS+compassだと、自動的にプレフィックスを追加してくれて楽なようですが、私はcompassを使っていません

Bracketsの拡張機能でSCSSを使えるようにして、ファイルを更新する度にCSSを更新して、ライブプレビューに即座に反映させています。なんおでcompassを使わずともSCSSのコンパイルにはBracketsだけで事足りるのですが

ベンダープレフィックスのところはCSSの時と変わらず面倒くさいです。

それを＠mixinを使って簡略化するテクニックがあったので、紹介したいと思います

＠mixinを使ってベンダープレフィックスをつけるのを簡略化する方法

ネタ元はこちらのコードにこの方法が載っていて、この使い方いいね！って思って取り入れました

http://codepen.io/ScottMarshall/pen/GDCxw

/*************************************
MIXINS
*************************************/
@mixin vendor-prefix($name, $argument) {
  -webkit-#{$name}: #{$argument};
  -ms-#{$name}: #{$argument};
  -moz-#{$name}: #{$argument};
  -o-#{$name}: #{$argument};
  #{$name}: #{$argument};
}

こうやることで、ベンダープレフィックスが必要なものは一行ですみます

@include vendor-prefix(transition,0.2s ease);

CSSに変換したらこのようになります

  -webkit-transition: 0.2s ease;
  -ms-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;

これでだいぶと略出来たでしょう、これでもまだ削りたいなって思うのでvendorのところを削ってprefixっていう表記だけで使えるようにして

さらにこのまま入力するのも手間だったら日本語入力のユーザー辞書にこの文を登録して、「ぷれ」で変換できるようにするのも有りかと思います、日本語入力に切り替える手が少し増えるので、さほど効果はないかもしれないけど

Tweet

短縮URL:

2014年05月14日 WEB制作系 SASSSCSS