SassバージョンのZurb Foundationを使う

CSSフレームワークのFoundationにはカスタマイズダウンロードページがありますが、設定値を細かく変えながらテストしたいときには全く使えません。Sassを使ったほうがラクですよね。とりあえずインストール方法のメモです。Mac OS 10.8.3での話なので、他のプラットフォームだと違う可能性があります。

まず、Sassを使うためにRubyが必要になりますので、インストールしていないかたはこちらなどをご参考に。
【初心者向け】Mac OSX10.8(Mountain Lion)で Ruby on Railsを動かすための5ステップ

gemが使えるようになったら、ターミナルからzurb-foundationをインストールします。

$ sudo gem install zurb-foundation

compassを入れてない方は、compassもインストールしましょう

$ sudo gem install compass

zurb-foundationとcompassがインストールできたら、プロジェクトを作成します。HTMLファイルを置きたいフォルダの親フォルダに移動し、compass createコマンドでプロジェクトを作ります。

$ cd /path/to/parent-folder  $ compass create myproject -r zurb-foundation --using foundation

プロジェクト名（ここではmyproject）のフォルダが作られ、その中にsassファイルなどなどがダウンロードされます。

myproject/sass/_normalize.scss
myproject/sass/_settings.scss
myproject/sass/app.scss
myproject/humans.txt
myproject/robots.txt
myproject/MIT-LICENSE.txt
myproject/javascripts/foundation/foundation.alerts.js
…
myproject/index.html
myproject/stylesheets/app.css

これでインストール完了。プロジェクトフォルダに移動し、watch開始するとSassファイルの変更が自動で反映されます

$ cd myproject  $ compass watch    Dear developers making use of FSSM in your projects,  FSSM is essentially dead at this point. Further development will  be taking place in the new shared guard/listen project. Please  let us know if you need help transitioning! ^_^b  - Travis Tilley    >>> Compass is polling for changes. Press Ctrl-C to Stop.

なんだかメッセージに顔文字があってフレンドリーだ。
試しに、myproject/sass/_settings.scss の中の基本フォントサイズを書き換えてみる。

$base-font-size: 93.75% !default; // 14px

ターミナルを見ると、無事にCSSが上書きされたことが分かる。

>>> Change detected at 05:59:29 to: _settings.scss  overwrite stylesheets/app.css 

watchのストップは Ctrl+Cで。

公式サイトではさらにGitレポジトリを指定してのインストールなどが解説されています。

Foundation Docs: Sass

---