解 説

CompassはSassを利用したCSSフレームワークです。導入はちょっと面倒ですが、うまく導入できるとCSSがすごく楽に書けるようになります。

Compassでできることは、ベンダープレフィックスなどの複雑なCSSを簡単に記述できたり、画像のwidthやheightを取得してくれたり、スプライト画像を作成してくれたりもします。

Compassのインストール〜Mac OS X El Capitan編

Compassのインストールはやっかいです。PCの状況で色々と設定が必要になります。
OSのバージョンや色々な環境でエラーが出た際はそのエラー内容を検索するなどで自分で解決するより他になさそうです。
今回はMac El Capitanでのインストール方法です。参考になれば幸いです。

SassはRubyで書かれていますので、Rubyの仕組みを使います。RubyにはGemという便利なライブラリ追加機能が用意されています。(ターミナルを使います)
このGemを使ってCompassも導入すれば簡単な話なのですが、Macの方でセキュリティ関連の対策が厳しくなっており素直にGemが使えない状態になっています。

そこでまずGem自体のバージョンをアップデートしまておきます。(必須ではありません)「sudo」は一時的にrootになるコマンドです。これを使うことで全ての管理権限者になれます。ということで当然Macのパスワードを聞かれますのでパスワードを入力します。(Password:の後に鍵のマークが出てきますのでそこにパスワードを入力)
参考:gem update –system したら gem update bundler もね!

さて、次はCompassのインストールをGemで行えばOKのはずがエラーになります。

この辺の対策は次のページがわかりやすいです。大体このとおりになりますのでまずは一読してみてください。

参考:【Mac】SassとCompassをインストール!エラー克服版!

結論としてこの方の記事はEl Capitanの前に書かれていますので、El Capitanの場合はこのとおりにやってもうまくいきません。もうひとひねり必要です。
けれども途中まではこの記事どおりでOkですからそのまま記事と同様のことを行います。ライセンス同意のところで「agree」と入力しますが、ついつい、スペースキーを押しすぎてスルーしてしまいます。最後に「agree」と入力するときは慎重に行いましょう。

同記事ではその後「sudo gem install compass」でうまくいくとなっていますが、El Capitanではうまくいきません。
次のコマンドでcompassを導入します。

Command Line Developer Toolsの導入もうひとつの方法

Command Line Developer Toolsの導入にはもっと簡単な方法があります。 Xcode バージョン 6.1 以降では、Xcode のインストール中に Xcode コマンド ライン ツールが自動的にインストールされるようになっているようです。

Xcodeはすでに導入しており、何かのタイミングでアップデートしたがXcodeは開かないままになっている場合は一度Xcodeを開いてみると色々とインストールが始まる場合もあります。

Xcodeのインストールがまだの場合は、App StoreからXcodeをインストールします。
Mac 上で Xcode を起動してメニューの「Preferences」を選択します。
「Locations」ウインドウから「Command Line Tools」にバージョンが示されていたら、Command Line Developer Toolsは導入済みです。

もし、Command Line Developer Toolsがインストールされてないなら、「Mac での Xcode コマンド ライン ツールのインストール」を参考にしてインストールしてください。

Command Line Developer Toolsの導入が済めば次のとおりcompassを導入します。

次のコマンドでバージョンを確認してバージョンが確認できれば成功です。

プロジェクト作成

compassを使うフォルダを作成します。場所はどこでも良いです。
次にターミナルの「cd」でカレントディレクトリを作成したフォルダに移動します。

次の例はユーザーの中に「compass」フォルダを作成してcdで移動するコマンドです。

新規プロジェクトを作成します。コマンドを入力します。「compass create フォルダ名」と指定すると指定したフォルダ内にsassファイルやcssファイルができます。

次にKoalaに出来上がったフォルダを登録して、koalaのオプションのcompass Modeにチェックを入れて準備完了です。
sass20

あとはCompassを使って便利にCSSを書いていくだけです。

Compassの使い方

SassでCompassを使うにはモジュールをimportする必要があります。
Compassのモジュールは、「css3」、「Typography」、「Utilities」、「layout」、「Reset」の5つに分類されており、必要なモジュールを@importでインポートします。

Sassの@importでインポート記述例

角丸の記述例

cssの展開後

Sassの関連記事

  1. Sassの導入 〜Sass(1)
  2. Sassのネスト 〜Sass(2)
  3. Sassの変数 〜Sass(3)
  4. Sassの@import 〜Sass(4)
  5. Sassの演算と関数 〜Sass(5)
  6. Sassのミックスイン 〜Sass(6)
  7. CompassをインストールするMac OS X El Capitan編 〜Sass(7)