Sassは知っていたけれど、
いちいちコンパイルするほど大規模サイトやらないし、と思って使っていませんでしたが。
そんなついつい黒い画面を避けちゃうあなたに朗報、
なCodeKitの存在を知って早速（っていうか今頃）導入してみました。
導入の流れをおさらいします。
0. そもそも何それ？
SassはCSSの入力を構造的にし、変数などを使ってより書きやすくしてくれるツールです。
Rubyで出来ていますが、Rubyを知らなくても使えます。
CompassはSassを拡張し、より便利にしてくれるツールです。
というわけでWebのフロントをやる人にはとてもステキなツールなのですが、
いかんせんコマンドラインベースなので
Sassのファイルを書く→保存する→コンパイルする→ブラウザで見る
という流れが
CSSを修正→Codaで即確認
という流れよりもどうしても助長に感じてしまう
小規模サイト開発者（私）のような人にはあんまり踏み込む意義を見いだせずにおりました。
書いたらすぐ確認したくなっちゃう人なんです、私。
が、CodeKitのお陰で、
コンパイルする、という作業が必要なくなったのです、わーいわーい！
その他、CodeKitの凄さについてはこちらの記事が秀逸です。
Sassだけじゃなくて、これはもう次世代のWEBフロントエンド開発に不可欠になりそうな感じ。
というわけで、
1. インストール
macにはrubyが入っているので、ターミナルなどで
sudo gem install sass
sudo gem install compass
をしてそれぞれをインストール。
CodeKitは公式サイトから入手してタブルクリックする（そしてApplicationフォルダに移す）。
簡単ですねー。
2. 動かしてみる
CodeKitをたちあげて、監視してもらいたいプロジェクトフォルダをドラック＆ドロップ。
Sassを使うだけなら、これだけでOK。
Compassを使うには、使いたいプロジェクトのポップアップメニューからCompassを選んで
Use Compass for this projectを選択。
コマンドラインから何もしてなければ、No Configuration File っていうポップアップ画面が出るので、
Install Compass をクリック。すると、
Install Compass In Project という設定画面が出るので、
それぞれのフォルダ名や書き出し方法を設定して、Add Compass To Projectをクリックする。
（Compassの使い方がまだ良くわかっていなくて、ieやらprintやらscreenやらとCSSを分けて出力されちゃうのを何とかしたいところ）
そうすると、フォルダ直下にconfig.rbという設定ファイルが出来るのでそれを直接編集することもできます。
3. CSSを書きだしてみよう
Coda2はLessもSassも対応しているのですぐ書けます。
デフォルトではsassというフォルダにSass（拡張子は.scss）ファイルが入っているので、
それを開いて編集（書き方は以下参照）し、保存するとすぐにCSSファイルが生成されます。
Growlを入れていたら、コンパイルに成功したよ（もしくは失敗したよ）とお知らせまで出ます。
エラーログを吐いてくれるのが何ともステキです。惚れます。
Compassについては、
An introduction to Compass from Lorin Tackett on Vimeo.
これを参照に書き始めてみましょう。
日本語ですとココがわかり易かったです。
その前にSassの書き方っていう人はこちらなどを。
というわけで、私のCSSライフがかんなり快適になりました。
Macさいこー。って気分になりますね。
