OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

「Sass」&「Compass」のインストール方法まとめ(Mac OS X)

最終更新日:2018.1.7 Update!!
ここ数年で注目を浴びてきている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を選択
  • 「Sass」&「Compass」のインストール方法まとめ(Mac OS X)
  • 4. ページ下部のAdditional Toolsを選択
  • 5. リストよりOSとXcodeの環境に対応するCommand Line Toolsを選択しインストールする
  • 「Sass」&「Compass」のインストール方法まとめ(Mac OS X)
  Command Line Toolsのインストール完了後、再度Compassのインストールを行います。   以上でSassとCompassのインストールは完了です。コマンドを打ち込むだけなのでそんなに難しくもなく、あっという間にインストール作業も完了します。SassとCompassで面倒だったコーディング作業もスピーディーに進めることができます。  
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram