[Compass,CSS3]CompassのCSS3モジュールをまとめてみた（随時更新予定は未定）

自分ノートとしてCSS3モジュールをまとめてみるわけさ。

とりあえず絶対使いそうなもの3つから。
まずは基本の「キ」

角丸 border-radius

.hogeA {
    @include border-radius;
}

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

.hogeA {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

値がある場合

値が1つの場合

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

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

.hogeB {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

値が2つの場合

.hogeC {
    @include border-radius(5px 10px);
}

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

.hogeC {
  -moz-border-radius: 5px 10px;
  -webkit-border-radius: 5px;
  border-radius: 5px 10px;
}

値が2つの場合（カンマ区切り）

.hogeD {
    @include border-radius(5px,10px);
}

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

.hogeD {
  -moz-border-radius: 5px / 10px;
  -webkit-border-radius: 5px 10px;
  border-radius: 5px / 10px;
}

影 box-shadow

.hogeE {
    @include box-shadow;
}

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

.hogeE {
  -moz-box-shadow: 0px 0px 5px #333333;
  -webkit-box-shadow: 0px 0px 5px #333333;
  box-shadow: 0px 0px 5px #333333;
}

値がある場合

.hogeF {
    @include box-shadow(2px 2px 3px #666);
}

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

.hogeF {
  -moz-box-shadow: 2px 2px 3px #666;
  -webkit-box-shadow: 2px 2px 3px #666;
  box-shadow: 2px 2px 3px #666;
}

文字の影 text-shadow

.hogeG {
    @include text-shadow;
}

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

.hogeG {
  text-shadow: 0px 0px 1px #aaa;
}

値がある場合

.hogeH {
    @include text-shadow(2px 2px 3px #666);
}

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

.hogeH {
  text-shadow: 2px 2px 3px #666;
}

まとめ

ようなベンダープレフィックスで楽したいだけなので、スニペットとかでも良さげだけど、その他のメリットを見ても断然Compassでしょってこと。
引き続きまとめ上げまくります。

ところでkoalaのフォルダに日本語が入ってるとエラーが出るのはどうにかなんないの？