こんにちは。マークアップのMikaです。
本年もよろしくお願いします。

先日、案件が一段落したので、SassとCompassをアップデートしたら、コンパイルでエラーが出てびっくり！( ﾟДﾟ)
今までは、こんなことなかったのに…

ということで、今日は、プロジェクトの環境構築について自分のメモという意味も含めてまとめてみたいと思います。
プロジェクトを始める時に1回しかやらないから、忘れちゃうんだよね(๑´ڡ`๑)ﾃﾍﾍﾟﾛ

【前提】

・Foundation 5 を使います。
・Ruby、Node.jsはインストールしておきましょうね。
・Sass、Compassも入れておきましょうね。
・コマンドプロンプトを開いておきましょうね。
　（Windowsベースでお話します）

1.bowerをインストールする

（インストール済みの場合はスキップ）

> npm install -g bower grunt-cli

2.Foundationをインストールする

> gem install foundation

3.Foundationのプロジェクトを作る

> foundation new MY_PROJECT

※MY_PROJECTには開発のベースにするフォルダ名が入ります。パス付でもOK。

これで、準備は完了…
っとと、ちょっと待って！！SassとCompassのバージョンはいくつ？？

Foundationは2014/12/12に5.5になっていて、Sass3.4対応になっていて、Sass3.2互換はなくなっているようです。（参照：http://foundation.zurb.com/docs/changelog.html）

4.Bundlerを使ってSass・Compassのバージョンを指定する

> cd MY_PROJECT （←プロジェクトフォルダに移動）
> bundle install

ただ、この方法では、制作するPCにある、ほかのプロジェクトのSass、Compassもアップデートされてしまいます。すると、前のバージョンで作ったFoundationのプロジェクトが動かなくなってしまう!!

4-2.Bundlerを使ってSass・Compassの指定のバージョンをプロジェクトのローカルにインストールする

> bundle install --path vendor/bundle

pathオプションを指定することで、プロジェクト配下のフォルダにgemをインストールするフォルダを指定できます。
これで、他のプロジェクトには影響せずにgemのインストールができました。

これで、準備完了ε～(￣、￣;)ゞフー

さてさて、これで作りこみに入るわけですが、bundlerを使っているので、Compassのコンパイルにひと手間かけなければなりません。

5.Compassのコンパイル

> bundle exec compass w

bundlerで指定したバージョンのgemを使うときには「bundle exec」を付けて実行します。

これまでは、深く考えずにコマンド打ってましたが、ようやくちょっとまとまりました。Gemfile.lock があれば、何人かでコーディングする時にも、同じ環境を作りやすいですし、これからは使わなきゃ٩(๑´3｀๑)۶

＜参考＞
Foundation – Front-endフレームワーク
Ruby – スクリプト言語
node.js – サーバーサイドJavascript
Sass – スタイルシート言語
Compass – Sass拡張フレームワーク