解 説

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 もね!

sudo gem update --system

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

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

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

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

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

sudo gem install -n /usr/local/bin 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を導入します。

sudo gem install -n /usr/local/bin compass

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

compass -v

プロジェクト作成

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

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

cd /Users/tahara/compass

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

compass create

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

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

Compassの使い方

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

Sassの@importでインポート記述例
[sass]
@import “compass/css3”;
@import “compass/typography”;
@import “compass/utilities”;
@import “compass/reset”;
@import “compass/layout”;
[/sass]

角丸の記述例
[sass]
h2{
@include border-radius(10px);
}
[/sass]

cssの展開後

h2 {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

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)