【Mac】SassとCompassをインストール！エラー克服版！

2015/02/28

WEB DEV

こんにちは。Sublime Text2使いやすすぎですよねー。
僕は、Sublime Textはいろいろと拡張できて満足してます。個人的にはzen-cordingを導入してコーディングがえらく捗っております。

臭いものにはフタをするとはよく言ったもので、僕もフタをしていたものがありましたが、本日フタを空けます！オープンします！！

SassとCompass。

今頃!?と皆さん思いますよね?僕も思います。
けど、今なんです！SMACSSとかBEMとかも最近知って（僕のことは遅咲きボーイと読んでも可）テンションマックスなんです！ Sublime Text2でSassとCompassを使うためには、SassとCompassをインストールしないといけないみたいなので、今回はターミナルを使ってSassとCompassのインストールの手順を紹介したいと思います！（すんなりいくはずが、あんなことになるなんて・・・編）

Sass x Compass

Sassとは何ぞや！
Compassとは何ぞや！
という疑問はあるとは思いますがそれは僕のサイト以外でたくさん情報が出回っているのでそちらをご覧ください。すいません、はしょります。

ではでは、僕の環境から説明しておきます。

・【OS】Mac OS X Mavericks
・【テキストエディタ】Sublime Text2
・【補足】ターミナル苦手（コピペしかできない）

SassとCompassのインストール

まずは、SassとCompassをインストールしましょう。
インストール方法はMacのアプリケーション「ターミナル」を使います。
使ったことない人でも、コピペでいけます！

ターミナルを立ち上げる

アプリケーション > ユーティリティ > ターミナルにあるので、ターミナルを立ち上げましょう。

Sassのインストール

ターミナルが立ち上がったら、文字がバーと出て、ちょっとしたらとまると思います。で、カーソルのところがテカテカ点滅していると思います。はい、そのまま、下記のコードをコピペしてEnterを押しましょう。パスワードを求められるのでパソコンのパスワードを入れてもう一度Enter。

sudo gem install sass

じゃあ、
Successfully installed sass-3.4.9とかとか、数行、文字が出るのでそれが出たらインストールできたなと思ってください。
厳密には

sass -v

で、インストール確認してください。（Sassのバーションとか出てればインストールできてます。）
これで、Sassのインストールはおしまいです。

次はCompassです。の前に他のサイトを拝見すると、ここのタイミングでgemのupdateとやらをしているところがあったのでそれに倣って僕も同じようにしました。それが下のコードです。

sudo gem update --system

これをコピペで先ほどのターミナルの続きに入れてください。そして、Enter。そしてパスワードも入れてEnter。
じゃあ、ものすごい行のコードがビシーと並んだと思います。
コードを読んで
Successfully installed rubygems-update-2.4.5と出ていたらアップデートできてます。
今回はsassのインストール後にgemのアップデートを行いましたが、Sassのインストール前にこのアップデートしているサイトもあったので、順番はどちらでも大丈夫かと思います。とりあえず、今回僕のパターンならちゃんとインストールできましたので不安な方は僕のやった方法でしてみてください。

Compassのインストール

で、ようやくCompassのインストールに移りたいと思います。
Compassも同様に続きでいいので、ターミナルに

sudo gem install compass

とコピペしてください。

Compassの悲劇の始まり

Compassをターミナルからインストールしようと上記のコードを打ってEnterを押すと

ERROR:  Error installing compass:
  ERROR: Failed to build gem native extension.

エラー。エラーの文字が出てきてインストールできませんでした。とりあえず、本当にインストールできてないのかを確かめるため

compass -v

をコピペしましたが、

-bash: compass: command not found

ないって言われてしまいました。
ジーザス。

Command Line Developer Tools

よくよく、いろいろなサイトを見ていると
Mac OS X Mavericksでは、Rubyのバージョンが上がったことが原因でうまくCompassがインストールできなくなっているみたいです。
そこで救世主となるのが「Command Line Developer Tools」です。
「Command Line Developer Tools」を入れることでCompasがうまくインストールできるみたいです。

Command Line Developer Toolsの導入

やり方は2通りあるみたいです。
1つはターミナルから、もう1つはXcode上からインストールできます。

ターミナルからインストール

また何も考えずにターミナルで

sudo xcode-select --install

と打ってください。インストールするのに5〜10分程度時間がかかります。
次に

sudo xcodebuild -license

と打ってください。ライセンスに同意してください。
ひたすらスペースキーを押して最後に

By typing 'agree' you are agreeing to the terms of the software license agreements. Type 'print' to print them or anything else to cancel, [agree, print, cancel] agree

と聞かれますので
丁重に
agreeと打って、Enterを押してください。これで、「Command Line Developer Tools」が導入できました。

注意点

上の動作はApple Developerに入っていないとできません。はじかれてしまいます。
以前、違うパソコンにもSassとCompassのインストールしてた際、Apple Developerに入っていなく、あれ？あれ？…で発覚しました。まぁ当たり前っちゃー当たり前なんですけどね。ははは。
下のXcode上からだと否応なしに登録しないと前に進めないので問題ないです。

Xcode上からインストール

こちらの方法では今回していませんので、
参考にできそうなサイトを載せておきます。
こっちの方が見た目的に簡単かな？
MavericksでCommand Line Tools for Xcodeをインストールする

Compassのインストール（2回目）

ようやくようやくこれで、Compassをインストールできるようになっているはずです。
では、もう一度

sudo gem install compass

と打ってみます。

Successfully installed compass-1.0.3

でました！！これでCompassもインストール完了です！
このあと、Sublime Text2での設定がありますが
後日、そのことは書きたいと思います。
お疲れさまでした！