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

css
このエントリーをはてなブックマークに追加
PR

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っていう表記だけで使えるようにして

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

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)