Rubyのインストール

RubyInstaller

インストールするときに、環境変数のPATHをチェックしておきます。

スタートアップメニューの「アクセサリ」から「コマンド プロンプト」を起動します。

ruby -v

と入力して

ruby 2.0.0p0

と表示されたらインストール完了です。

Compassのインストール

「コマンド プロンプト」から下記のコマンドを順に実行します。

gem update --system
gem install compass

下記コマンドでインストールされたか確認してみましょう。

compass -v

基本的にはCompassを入れればSASSも自動的にインストールされます。

Compassを使ってみよう

		http_path = "/"
		css_dir = "css"
		sass_dir = "scss"
		images_dir = "img"
		javascripts_dir = "js"
		

		section {
			margin: 10px;
			p {
				color: #333;
			}
		}
		

compass w

compass create

config.rb のオプション

Compasは「config.rb」を編集することでコンパイル時の設定を変更することができます。

config.rb

	#圧縮して書き出し
	output_style = :compressed
	#ラインごとに書き出されるコメントを出力しない
	line_comments = false
	

その他のオプションに関しては下記ページが詳しいです。

Compass設定ファイル(config.rb)｜sass｜study｜kanapple.net

CompassのMixinsを使う

SASSのはプロパティを一つにまとめて、あとで呼び出すという「Mixins」という機能がありましたね。
Compassには汎用的に使用できるMixinsがあらかじめ設定されていますので、自分で作成することなく「Mixins」を使用することができます。

例えばCSS3の「border-radius」を使用したい場合、今のところベンダープレフィクスも記述しなければいけませんので、それだけで5行ほどになってしまいますが、Compassを使用すれば次のように一行記述するだけです。

common.scss

	@import "compass";
	section {
		@include border-radius(25px);
	}
	

コンパイルすると自動的にベンダープレフィクスを作成してくれます。

common.css

	section {
	  -webkit-border-radius: 25px;
	  -moz-border-radius: 25px;
	  -ms-border-radius: 25px;
	  -o-border-radius: 25px;
	  border-radius: 25px;
	}
	

他にも色々ありますので公式のリファレンスを参考にしてください。

Compass Core Framework