[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のフォルダに日本語が入ってるとエラーが出るのはどうにかなんないの?

タイトルとURLをコピーしました