Mac OS 10.8（Mountain Lion）にSASS + Compassをインストールするメモ

Mac OS 10.8（Mountain Lion）にSASS + Compassをインストールするまでの個人的なメモ。

SASSはCSS風に書けてCSSファイルにコンパイルしてくれる言語で、
CompassはSASSで使えるライブラリ群ね。

詳しくは公式サイトを参照。

Compassの何が便利って、
CSS Spriteを作るのに、
画像を結合しなくてもいいし、
画像のpositionを指定しなくて良いのが便利過ぎる。

自分で画像を結合して、
選択ツールで座標を調べてたのは、
すげー無駄だったなぁって思う。

Rubyのインストール状態の確認

まずはRubyが入っていることを確認。
Mountain LionにはRubyが始めから入っているっぽいので、確認する必要がないかもしれない。

ruby 1.9.3p194 (2012-04-20 revision 35410) [x86_64-darwin11.4.0]

rubyは1.8系でも大丈夫（だと思う）。

RubyGemsのインストール

まず、RubyGemsのインストール状態を確認。

gem -v

インストールされていない場合は、
公式サイトからダウンロードしてsetup.rbを実行。

Download RubyGems | RubyGems.org | your community gem host

ダウンロードもターミナルでやる場合は下記のような感じでしょうか。

$ cd Downloads/
$ wget http://production.cf.rubygems.org/rubygems/rubygems-1.8.24.tgz
$ tar zxvf rubygems-1.8.24.tgz
$ cd rubygems-1.8.24/
$ ruby setup.rb
$ cd ../
$ rm -rf rubygems-1.8.24*

すでにインストールされている場合は、
rubygemsをアップデートする。
（update_rubygemsとgem update –systemはどっちがいいんですかねぇ？）

$ sudo gem install rubygems-update
$ sudo update_rubygems

インストール or アップデートができたら、
念のためバージョンを確認。

$ gem -v
1.8.24

Compassのインストール

gemからCompassをインストールする。

$ sudo gem install compass

念のためインストールできたか確認。

$ compass -v
Compass 0.12.2 (Alnilam)
Copyright (c) 2008-2012 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
$ sass -v
Sass 3.2.1 (Media Mark)

ちなみに、sassはcompassを入れると勝手に入る。

Compassの初期設定と監視

ディレクトリ構成はまだまだ検討中だけど、
今のところ下記のような感じにしている。

project_directory/
- css/ → cssファイルを出力する
- js/ → jsファイル置き場
- img/ → 画像ファイル置き場
- sass/ → sassファイル置き場

で、上記ディレクトリ構成になるように、
compassの設定ファイルを生成する。

$ cd project_directory/
$ mkdir sass
$ cd sass/
$ compass create --sass-dir "./" --css-dir "../css" --javascript-dir "../js" --image-dir "../img" --bare

scssファイルを監視する

下記のコマンドでsassファイルを監視して、
更新があるとcssファイルを書き出してくれる。

$ cd project_directory/sass/
$ compass watch ./

出力するcssファイルは、
minify化しない理由がないので、
config.rbに下記行を追加して、
始めからminify化するようにしている。

output_style = :compressed

以上。
個人的なメモでした。