cssを記述していく際にベンダープレフィックスを毎回書いていくのは面倒だし、そもそも全部覚えきれません。
Sassで記述していく際にCompassで用意されているMixinを使うことで記述が随分楽になります。
基本的なCompassの使い方についてはこちらのサイトが詳しいので参考にしてみてください。
CSSの常識が変わる！「Compass」、基礎から応用まで！
Compassを使う
まずは記述するscssファイルの冒頭に以下の記述をします。
style.scss
@import "compass";これでCompassのメインモジュールをインポートすることが出来ます。
Compassで書く
例えばこんな風に記述
p.sample{
@include border-radius(5px);
}するとコンパイル後はこのように出力されます。
p.sample {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}便利ですね。
compassの記述方法もたくさんあるのでよく使うものはリストで持っていた方がいいと思います。
よく使ういくつかのMixinを紹介します。
flex系
style.scss
p.sample{
@include display-flex;
@include flex(1);
@include align-items(center);
@include justify-content(space-between);
@include justify-content(center);
@include justify-content(flex-end);
@include flex-wrap(wrap);
@include flexbox((align-self: flex-end));
@include flex-direction(column);
@include flex-direction(column-reverse);
}コンパイル後のcss
p.sample {
display: -webkit-flex;
display: flex;
-webkit-flex: 1;
flex: 1;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-justify-content: center;
justify-content: center;
-webkit-justify-content: flex-end;
justify-content: flex-end;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-self: flex-end;
align-self: flex-end;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}transition系
style.scss
p.sample{
@include transition(ease-in-out , 0.3s);
@include transition(.3s);
@include scale(1.2);
}コンパイル後のcss
p.sample {
-moz-transition: ease-in-out, 0.3s;
-o-transition: ease-in-out, 0.3s;
-webkit-transition: ease-in-out, 0.3s;
transition: ease-in-out, 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}box-shadow系
style.scss
p.sample{
@include box-shadow(0px 6px 0px 0px rgba(0,0,0,0.2));
@include box-shadow(rgba(0, 0, 0, 0.1) 5px 5px 8px 3px inset);
@include box-shadow(5px 0 0 #fff);
@include box-shadow(0px 9px 3px -3px rgba(0,0,0,0.8));
}コンパイル後のcss
p.sample {
-moz-box-shadow: 0px 6px 0px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 6px 0px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 6px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 8px 3px inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 8px 3px inset;
box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 8px 3px inset;
-moz-box-shadow: 5px 0 0 #fff;
-webkit-box-shadow: 5px 0 0 #fff;
box-shadow: 5px 0 0 #fff;
-moz-box-shadow: 0px 9px 3px -3px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 9px 3px -3px rgba(0, 0, 0, 0.8);
box-shadow: 0px 9px 3px -3px rgba(0, 0, 0, 0.8);
}transform系
style.scss
p.sample{
@include rotate(15deg);
@include transform-origin(left, center);
@include transform(translateY(60px));
}コンパイル後のcss
p.sample {
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
-moz-transform-origin: left center;
-ms-transform-origin: left center;
-webkit-transform-origin: left center;
transform-origin: left center;
-moz-transform: translateY(60px);
-ms-transform: translateY(60px);
-webkit-transform: translateY(60px);
transform: translateY(60px);
}もちろんもっと出来ることはたくさんあります。
ただ、Compassを使って書いている際に、この書き方どうだったっけ。。と悩むこともあるのでよく使うのを簡単にまとめてみました。
