[Compass,CSS3]CompassのCSS3モジュールをまとめてみた（2）

予定は未定でしたが2度めの更新ですよ。

今回は「あ～見たことある～」的なところでいくつかピックアップしてみました。

時間的変化 transition

.hogeI {
    @include transition;
}

↓↓↓コンパイル後↓↓↓

.hogeI {
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
}

値がある場合

.hogeJ {
    @include transition(background-color 0.5s eaase);
}

↓↓↓コンパイル後↓↓↓

.hogeJ {
  -moz-transition: background-color 0.5s eaase;
  -o-transition: background-color 0.5s eaase;
  -webkit-transition: background-color 0.5s eaase;
  transition: background-color 0.5s eaase;
}

値を入れる場合は

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

transition-durationのあとにtransition-delayを書くのがポイント。

グラデーション linear-gradient , radial-gradient

.hogeK {
    @include background(linear-gradient(top,#000,#333));
}

.hogeL {
    @include background(radial-gradient(#000,#333));
}

↓↓↓コンパイル後↓↓↓

.hogeK {
  background: url('data:image/svg+xml;base64,～省略～IA==');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(100%, #333333));
  background: -moz-linear-gradient(top, #000000, #333333);
  background: -webkit-linear-gradient(top, #000000, #333333);
  background: linear-gradient(to bottom, #000000, #333333);
}

.hogeL {
  background: url('data:image/svg+xml;base64,～省略～IA==');
  background: -moz-radial-gradient(#000000, #333333);
  background: -webkit-radial-gradient(#000000, #333333);
  background: radial-gradient(#000000, #333333);
}

linearは値なしの場合はなく（）内の値を「開始位置(left,center,right,top,bottom)と角度(deg)、開始色、途中色、終了色)」を書くことでカスタマイズできます。
radialも値なしの場合はなく（）内の値を「開始位置(left,center,right,top,bottom)と角度(deg)、形状(circle,ellipse)、開始色, 途中色, 終了色」を書くことでカスタマイズできます。

透明度 opacity

.hogeM {
    @include opacity(.8);
}

↓↓↓コンパイル後↓↓↓

.hogeM {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}

まとめ

今回はまーまー使う中でもベンダープレフィックスが面倒なものをピックアップしてみました。
これだけでも作業効率は格段にあがるんじゃないでしょうか？