ここ数年で注目を浴びてきている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で面倒だったコーディング作業もスピーディーに進めることができます。