ここ数年で注目を浴びてきているCSSの拡張メタ言語である「Sass」ですが、もう既に導入されている方も多いと思います。またSassには便利なツールも用意されており、そのうちフレームワークの一つである「Compass」なんかもよく知られています。
今回はこのSassとCompassのMacでのインストール方法についてまとめていきたいと思います。
Sassのインストール
まずはSassのインストールから行います。Sassはメタ言語であるためコンパイルが必要になります。.sassもしくは.scssファイルがコンパイルされることで.cssファイルが生成される仕組みです。
このコンパイルにはRubyが必要になるのでインストールしないといけないのですが、Macには標準でRubyが入っているので大丈夫です。
そしてコマンドラインでインストールしていきます。
$ sudo gem install sass
完了したらバージョンチェックでインストールされているかを確認します。Sassのバージョンが表示されればOKです。
$ sass -v
Compassのインストール
続いてCompassも同じようにコマンドラインでインストールしていきます。
$ sudo gem install compass
こちらも完了したらバージョンチェックでインストールされているかを確認します。Compassのバージョンが表示されればOKです。
$ compass -v
下記のようなエラーが出る場合は、Apple Developersで「Command Line Tools」というものをインストールする必要があるようです。（あわせて事前にXcodeもインストールしておく必要があります）
〜 ERROR: Error installing compass: ERROR: Failed to build gem native extension. 〜
このエラーには次のように対処していきます。
- 1. https://developer.apple.com/にアクセス
- 2. AppleIDとパスワードを入力してアカウントログイン
- 3. Download Toolsを選択
- 4. ページ下部のAdditional Toolsを選択
- 5. リストよりOSとXcodeの環境に対応するCommand Line Toolsを選択しインストールする
Command Line Toolsのインストール完了後、再度Compassのインストールを行います。
以上でSassとCompassのインストールは完了です。コマンドを打ち込むだけなのでそんなに難しくもなく、あっという間にインストール作業も完了します。SassとCompassで面倒だったコーディング作業もスピーディーに進めることができます。
