第6章 Sassを更に便利にする Compass

6-4 Compassの設定変数を定義する

ベンダープレフィックスのオン／オフ

.boxA {
	@include transition(width 2s linear 0.5s);
}

$experimental-support-for-webkit: false;
.boxB {
	@include transition(width 2s linear 0.5s);
}

.boxA {
  -webkit-transition: width 2s linear;
  -webkit-transition-delay: 0.5s;
  -moz-transition: width 2s linear 0.5s;
  -o-transition: width 2s linear 0.5s;
  transition: width 2s linear 0.5s;
}
.boxB {
  -moz-transition: width 2s linear 0.5s;
  -o-transition: width 2s linear 0.5s;
  transition: width 2s linear 0.5s;
}

レガシーブラウザの対応のオン／オフ

.boxC {
	@include inline-block;

}

$legacy-support-for-ie: false;
$legacy-support-for-mozilla: false;
.boxD {
	@include inline-block;
}

.boxC {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
}

.boxD {
  display: inline-block;
  vertical-align: middle;
}