ISURUWORKS | THINGS IN MY LIFE

Sass + compass

2013/03/08

なにやら便利らしいので覚書
Sassは、入れ子でcssを書くと良い感じに書きだしてくれます。

header {
	margin: 10px;
	h1 {
	margin: 10px;
}

↑こう書くと

header {
  margin: 10px;
}

header h1 {
  margin: 10px;
}

↑こう書き出される
しかも計算ができる!

ul{width : 20 * 5px}/* liタグ5個分の横幅 20 * 5 */
li{width : 20px float : left}

↑これが

ul{
  width : 100px;
}

li{
  width : 20px;
  float : left;
}

↑素敵

compassは、Sassを拡張してくれてベンダープレフィックスを自動で追加してくれたりリセットCSS呼び出したり CSSスプライト作ってくれたりやたら便利になります。
参考URL: compass

インストール方法

※Sassもcompassもターミナルからインストールします。

■Sassの導入

sass

1.Rubyの確認

$ ruby -v

2.RubyGemsを最新版にアップデート

$ sudo gem update --system

3.Sassのインストール

$ sudo gem install sass

4.Sassがインストールされたかバージョンチェックで確認

$ sass -v

■compassの導入

スクリーンショット 2013-03-07 12.44.36

1.compassのインストール

$ sudo gem install compass

2.compassがインストールされたかバージョンチェックで確認

$ compass -v

■compassの使い方

ターミナルからcdコマンドで任意のディレクトリに移動して

$ compass create

とか設定が諸々メンドイです。。。
設定・管理をGUIでできたら良いのにって思って探したら・・・

ありました。

logo

CodeKit
$25で販売してます。
Less, Sass以外にCoffeeScriptとかも扱えるので十分元は取れます。

長くなってしまうのでCodeKitの使い方は次回書きたいと思います。