Compassを触ってみて、CSS3のモジュールを眺めてみる。

みなさん、こんにちは、まーしーです
ロンドンオリンピックまで１年を切ったようです。問題がちらほらあるようですが1年後がどんな感じになるのか今から楽しみです。

さて、Sassの話を以前何回か書きました。
その拡張みたいなものでCompassというのがあるのでそれをためしてみました。

Compass Home | Compass Documentation
http://compass-style.org/

Compassのインストール

Sassが入ってればCompassのインストール自体は簡単です。

$ gem update --system
$ gem install compass

CompassのCoreは

@import "compass"

をscssとかで読み込むところからスタートします。

これを読み込むと以下３つのモジュールが使えます。

• CSS3【@import "compass/css3"】
• Typegraphy【@import "compass/typography"】
• Utilities【@import "compass/utilities"】

以下２つのモジュールはCoreを読み込んだだけでは使えないみたいです。

• Layout【@import "compass/layout"】
• Reset【@import "compass/reset"】

例えば、Resetを使いたいときは個別に読み込むようです。

CSS3のモジュールを見てみる

とりあえずこの中での肝はCSS3のモジュールかと思います。

• Appearance【@import "compass/css3/appearance"】
• Background Clip【@import "compass/css3/background-clip"】
  
• Background Origin【@import "compass/css3/background-origin"】
  
• Background Size【@import "compass/css3/background-size"】
  
• Border Radius【@import "compass/css3/border-radius"】
  
• Box【@import "compass/css3/box"】
  
• Box Shadow(β)【@import "compass/css3/box-shadow"】
  
• Box Sizing【@import "compass/css3/box-sizing" 】
  
• Columns【@import "compass/css3/columns"】
  
• Font Face【@import "compass/css3/font-face"】
  
• Images(β)【@import "compass/css3/images"】
  
• Inline Block【@import "compass/css3/inline-block"】
  
• Opacity【@import "compass/css3/opacity"】
  
• Text Shadow(β)【@import "compass/css3/text-shadow"】
  
• Transform(β)【@import "compass/css3/transform"】
  
• Transition【@import "compass/css3/transition"】
  

βだけどCSS3 Pieなんかも想定してるっぽいですね。
いくつか使いそうな指定を見てみます。

Border Radius

以下の様に書くと

.simple { @include border-radius(); }

以下の様に出力されます。

.simple {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

Box Shadow

以下の様に書くと

.simple   { @include box-shadow(); }

以下の様に出力されます。

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

Background Image

以下の様に書くと

.simple   { @include background-image(linear-gradient(#FFFFFF,#000000));}

以下の様に出力されます。

.simple {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #000000));
  background-image: -webkit-linear-gradient(#ffffff, #000000);
  background-image: -moz-linear-gradient(#ffffff, #000000);
  background-image: -o-linear-gradient(#ffffff, #000000);
  background-image: -ms-linear-gradient(#ffffff, #000000);
  background-image: linear-gradient(#ffffff, #000000);
}

Opacity

以下の様に書くと

.simple   { @include opacity(0.1); }

以下の様に出力されます。

.simple {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
  opacity: 0.1;
}

ということで

CoreのCSS3モジュールのメインはブラウザ用のプレフィックス付きの指定を入れてくれるのと、書き方を調整してくれるところのようです。
上記はデフォルト値での指定をまずしてみましたが、それぞれの値を指定することで出力を修正することも出来ます。
（自動で入れてくれることについては色々な考えや気になるところがあるかもしれませんが。。）  

サイトを見ていても機能が豊富過ぎるようでどこから手をつけようか？？と躊躇してしまいます。
まずは「Sassを使う際に少し指定をしやすくなった」 くらいに考えて使ってみようかと思います。