CSS拡張メタ言語「Sass」フレームワークをインストール（Mac）ウェブデザイン

こんにちは、デザイナーの石井です。
1年ほど前からTwitterのTLなどでしばしば目にして気になっていた「Sass」。
ちょっと調べてみたところ、CSSコーディングの際に「こんな事できたら良いのに！」と
今まで思っていた事が実現出来るすごいフレームワークなのでは？！と思い、
試しに触ってみる事にしました。

が！気軽な気分で手を出してみたものの、Zen Codingの様なものとはまた違い、
どうやらRuby on Railsのプラグインの様なものとして動く様子。
そもそも「Rubyってなに？」っていう状態の生粋の文系デザイナーなので、
案の定、インストールからエラーがでまくり...。
サイブリッジは開発案件も多く手掛けていますので、
こういう時、社内のプログラマーにすぐ聞ける環境なのは助かります。

今回は同じ様に躓くかもしれないデザイナーさんのために、
自分の環境でのインストール成功までの過程をご紹介したいと思います。

※自分の環境がMac（OSX Leopard / 10.5.8）ですので、
その環境に則した内容になっています。

ちなみに、「Sass」の概要と「Sass」のどこが凄いか、という事に関しては、
「Sass」のエヴァンジェリスト、小久保浩大郎さんがCSS Niteで行った講演の、
下記Ustreamの録画に大変分かりやすくまとまっていますので、視聴をお勧めします。

小久保浩大郎：「Sass徹底解説〜SassがもたらすCSSのパラダイムシフト」其の一
http://www.ustream.tv/recorded/12128935
小久保浩大郎：「Sass徹底解説〜SassがもたらすCSSのパラダイムシフト」其のニ
http://www.ustream.tv/recorded/12129141

個人的には、

1. セレクタをネストでき、構造化して記述できる
2. 変数が使える
3. 計算式や関数が使える

皆さんそうだとは思うのですが、上記3点に特に魅力を感じました。

「Sass」をインストールする

Sass公式ページ
http://sass-lang.com/download.html



上述した通り「Sass」はRuby on Railsのプラグインであり、
htmlフレームワーク「Haml」の一部として提供されているようです。
Mac OSXには初めからRubyが入っていますので、
下記サイトを参考にさせて頂き、取り合えずインストールを試みてみました。

参考：SassとDreamweaverのコードヒントでCSSをさらに効率的に
http://linker.in/journal/2010/10/sassdreamweavercss.php

不慣れなターミナルを起動し、たどたどしい手つきでコマンドを打ち込んでみます。

$ sudo gem install haml

上記参考サイトではサラッとインストール成功となっていますが、
まずここで何度やってもエラーが出ました。

ERROR: While executing gem ... (Gem::RemoteSourceException)
HTTP Response 302 fetching http://gems.rubyforge.org/yaml

Rubyについては全くの門外漢なので、あれこれと調べて見た結果、
自分の環境がMac OSX Leopardで一世代古いので、
「Ruby（もしくはgems？）のバージョンが古いためでは？」という結論に。
取り合えずバージョンのチェックを試みてみました。

$ sudo ruby -v
ruby 1.8.6 (2009-06-08 patchlevel 369) [universal-darwin9.0]
$ sudo gem -v
1.0.1
$ sudo rails -v
Rails 1.2.6

OSXの現行10.6（Snow Leopard）に入っているRubyのバージョンを調べてみると、
1.8.7とのことですので、下記サイトを参考にRubyをバージョンアップしてみる事にしました。

参考：デザイナーのための Ruby on Rails + Mac 環境構築ガイド
http://fjord.jp/love/423.html

Xcodeは以前別件でOSインストールディスクからインストール済みでしたので、
Leopard用のMac Portsをダウンロードし、インストール。
http://distfiles.macports.org/MacPorts/

そしてターミナルで下記のコマンドを入力、

sudo port install ruby rb-rubygems

しかし、ここでも何故かエラーが出ました。数時間調べても目星い情報は得られず、、、
途方に暮れていたのですが、ふとOSX Leopardのインストールディスクから入れた、
Xcodeのバージョンが古いんじゃないだろうかと思い至りました。
調べたところ、自分の環境のXcodeのバージョンは3.0。
最新版は4.0.1（2011年5月10日現在）ですが、
OSX 10.5で動く最新のバージョン、Xcode 3.1.4をダウンロードしてインストールしました。

ちなみに、Xcodeの過去のバージョンのダウンロードはこちらでできます。
※要デベロッパー登録。
http://connect.apple.com/cgi-bin/WebObjects/MemberSite.woa/wo/5.1.17.2.1.3.3.1.0.1.1.0.3.3.3.3.1

参考：Xcode - Wikipedia
http://ja.wikipedia.org/wiki/Xcode#Xcode_.E3.83.90.E3.83.BC.E3.82.B8.E3.83.A7.E3.83.B3.E6.AD.B4


Xcodeアップデート後に、再度上記コマンドを実行すると、
見事にRubyのインストールが成功しました。
その後、RubyGemsを最新版にアップデート。

sudo gem update --system

そしてついに「Haml（＝Sass）」のインストール成功。延べの時間で言えば半日以上、
このコマンドを実行するまで、長い道のりでした...。

$ sudo gem install haml

環境がSnow Leopardであればもっとスムーズに済んだんでしょうし、
そもそもWindows環境ではまた違った手順が必要だと思いますが、
今回の記事が、同じ様に「Sass」のインストールで躓いた、
Mac使いのデザイナーさんの一助となれば幸いです。

インストールで力尽きた感がありますが（笑）、
Rubyベースのフレームワークなので、プログラマーとの連携にも強みがありそうですし、
今後Rubyの開発案件などでも、活用出来ると良いなぁと思っています。

また、「Sass」を使い込んでいく中でのノウハウなどが溜まってきたら、
こちらでご紹介させて頂きます。