今さら人に聞けない！？Sass&Compass環境構築の備忘録 for OSX
2016年4月18日
haino
こんにちは。デザイナーの灰野です。最近はすっかりRaspberry Piにハマっておりまして、会社のブログも直接お仕事とは関係ないラズパイ絡みばかりを書いてやろうと画策しておりましたが、今日は備忘録も兼ねまして仕事に直結した内容を扱おうかと思っております。
私めは、社内ではデザイナーという立ち位置ですので、普段からあまりごりごりとhtmlコーディングをやるわけではありません。そんなこんなで、ふと気がつくとナウい（死語ですみません…）コーダーの人たちがやっている仕事っぷりからすっかり取り残されそうになるわけですが、面倒くさがらず新しいことには順応すべきかと思っております。
そういうわけで今日はScssでごりごりコーディングしようかと思い、手始めにSassとCompassを愛機のMacにインストールしてみようかと思います。
システムのバージョン
OS X 10.11.4 (OSX El Capitan)
Sassのインストール
まずはSassのインストールでございます。
SassのインストールにはRubyが必須ですがOS Xには最初からインストールされています。インストールにはRubyのgemと呼ばれるパッケージングシステムでインストールします。お決まりのコマンドを打つだけなので楽勝です。まずはターミナルを起動してアップデートします。
sudo gem update --system
アップデートしたら、今度はSassをインストールします。
sudo gem install sass
いやぁ。簡単簡単。
と思うのもつかの間、あれ？何やらエラーめいた文字が吐き出されました。
Fetching: sass-3.4.22.gem (100%) ERROR: While executing gem ... (Errno::EPERM) Operation not permitted - /usr/bin/sass
これでインストールされるはずですが、なんとエラーが出てインストールできません。。。
なぜに？
ググってみると、どうやら、El Capitanからrootlessという概念が登場したそうで、root権限を持つユーザーでも特定ディレクトリへのインストールができなくなってしまったみたいです。
MacOSX El Capitanでcocoapodsインストールが出来ない時の対処法
http://qiita.com/AcaiBowl/items/4bb4708de03e6ee14a4a
ああ、なるほど、ディレクトリを変えればいいのか。
そういうわけで下記のようにコマンドを変え…
sudo gem install -n /usr/local/bin sass
無事インストールされました。
Successfully installed sass-3.4.22 Parsing documentation for sass-3.4.22 Installing ri documentation for sass-3.4.22 1 gem installed
バージョンを確かめてみましょう。
sass -v
上記のような「-v」というコマンドオプションを使用します。
Sass 3.4.22 (Selective Steve)
はい。完了です。
Compassのインストール
お次はCompassのインストールでございます。
rootlessのことを知りひとつ賢くなったわたしは、こんな風にやればいいのだろうと、下記のコマンドを入力。
sudo gem install -n /usr/local/bin compass
と打ち込み、最後に高らかに“ターン”とreturnキーを決めました。…むむむ？
ERROR: Error installing compass: ERROR: Failed to build gem native extension. current directory: /Library/Ruby/Gems/2.0.0/gems/ffi-1.9.10/ext/ffi_c /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby -r ./siteconf20160418-6193-1aixih0.rb extconf.rb mkmf.rb can't find header files for ruby at /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/include/ruby.h extconf failed, exit code 1
なんかよく分かりませんが、gemのネイティブ・エクステンションのビルドに失敗とか何が生じているのかよく分かりません。
そこでまたググりました。さすがネットの世界は広い。先人の方がおりました。
CompassをインストールするMac OS X El Capitan編 〜Sass（７）
http://itstudio.co/2015/12/02/5124/
どうやらこちらのブログの解説では、Xcodeの「Command Line Developer Tools」が必要とのことで、Xcodeの導入が必要なようです。会社のMacにはXcodeがたまたま入っていなかったので、最新のXcodeをApp Storeからインストールしてみました。
最新のXcodeの場合は、「Command Line Developer Tools」がデフォルトでインストールされるようで、特に何も気にせずXcodeを起動してメニューの「Preferences」を選択後、「Locations」ウインドウから「Command Line Tools」に「Xcode 7.3(7D175)」とバージョンが表示されインストールされました。
きっと「Command Line Tools」がインストールされていると何かが良くなるんでしょうね。本論からそれるのもなんなので今回はこのへんの事情には特に触れず先に進むことにしました。
これで晴れてインストールが可能となったはずです！！
sudo gem install -n /usr/local/bin compass
とコマンドを入力して最後に“ターン”とreturnキーを押下。
今度はうまくいっているようです！
compass -v
バージョンを確認して
Compass 1.0.3 (Polaris) Copyright (c) 2008-2016 Chris Eppstein Released under the MIT License. Compass is charityware. Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
と表示されればOKです！！
ところで、寄付して節税してください、ときましたか。寄付金は控除の対処になるんですね。
知りませんでしたが、開発者の方の労をねぎらうためにも寄付することは大事ですね！！
これでなんとか環境構築できました。
ところで、オールドタイプには違和感ありまくりのBEM記法にも早く慣れないとなぁ。。。