ペンダープレフィックスを簡単につけてたい。

例えば"border-radius: 10px;"などのペンダープレフィックスが必要なスタイルを書く際に
emmetなどのコーディング補助機能などを使えば必要なペンダープレフィックスは自動的に書き足してくれます。


ただ一部のCSS3プロパティで例えば"display:box"などはemmetが対応しておらずペンダープレフィックスをその都度、直入力で書かなくてはなりません。


だったら@eachを使って自動で付与する方法が以下の通りです。


sass

/*　まずペンダープレフィックスを変数に格納 */
$prefixList : -webkit-, -moz- , -o- , null;

/*　付与したいセレクタに@eachを使って流し込み */
div.wrapper{
	@each $prefix in $prefixList{
	display: #{$prefix}box;
	}

css(コンパイル後)

div.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -o-box;
  display: box;
}

このように使用頻度の多い変数はグローバル変数として個々のルールセットに収めずに
冒頭辺りに宣言した方が何かと便利。

ミックスインで更に使い勝手を良くする

@eachをその都度書くのも面倒。border-radiusの様に数値も指定するプロパティもある場合はミックスインを活用してみてより使いやすくしてみる。


sass

/* ミックスインで定義する */

@mixin border-radius($value){
 @each $prefix in$prefixList {
	#{$prefix}border-radius: $value;
	}
}

section.Main{
	 @include border-radius(10px);
	}

css(コンパイル後)

section.Main {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}