ノンプログラマーがMacでCompassを導入してみた

経緯

Sassは以前から導入していたものの、Compassを使っておらず、Sassの恩恵をあまり受けていなかったことに気付き、早速Compassを導入することにしました。

環境

実際に導入した時の環境はこんな感じでした。

• Mac OS X 10.8.5
• ruby 1.8.7(2012-02-08 patchlevel 358)
• Sass 3.2.19
• Compass 0.12.6

そのまえにCompassって？

SaasやCSSの機能を拡張するフレームワーク。
例えるなら、CSSがコア・ファイターで、Sassはガンダム。
Compassに至っては、マグネット・コーティング仕様のG-3ガンダムといった感じだと思っていただけると非常に分かりやすいかと思います。

何ができるの？

1. スプライト画像作成がすごく簡単！
2. 再利用可能なコードがぎっしりあるので、CSSよりもコードを書かなくて済む！
3. CSS3も簡単に記述できる！

早速Compassのインストール

※Sassは事前にインストールしておく
※sassのバージョンが古い場合があるから最新のものにしておく

参考）→ http://liginc.co.jp/designer/archives/11623#a6

1. ターミナル（くろいがめん）を起動

2. 次のコマンドを実行する
   sudo gem install compass

3. パスワードを求められるので入力する

4. 少し待つと数行の文字が表示される

5. ちゃんとインストールされたか確認するために次のコードを入力する
   compass -v

6. 次のような文字が表示されます。
   Compass 0.12.6 (Alnilam) Copyright (c) 2008-2014 Chris Eppstein Released under the MIT License. Compass is charityware. Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

プロジェクトの作成

1. ターミナル（くろいがめん）を起動

2. プロジェクトを作りたいフォルダに移動（cdと打った後にフォルダをターミナルにドラッグでプロジェクトのパスを入力できます。）
   cd [プロジェクトのパス]

3. 以下のコマンドを実行！
   compass create --sass-dir "scss" --css-dir "css" --javascripts-dir "js" --images-dir "img"

※sassファイルはscssフォルダへ、CSSファイルはcssフォルダに作成されます。
※JavaScriptファイルはjsフォルダ、画像ファイルはimgフォルダを参照してくれるようになります。

config.rbの設定

先程作成されたプロジェクトの中にconfig.rbというrubyのファイルがあります。
ここにプロジェクトの設定が書かれているので、これを書き換えたりできます。
自分は以下のような感じになりました。

config.rb

# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass scss scss && rm -rf sass && mv scss sass

画像やjavascriptのパスを変える時はプロジェクトからの相対パスで指定します。

Compassをコンパイル！

1. ターミナル（くろいがめん）を起動
2. 以下のコマンドを実行

compass w

これで、CSSフォルダにcssが書き出されました。

GUIコンパイラを使う場合

Koalaの場合　（　ダウンロードはこちら　→　http://koala-app.com/　）

Koalaでうまくコンパイルができない場合は、指定したフォルダーの階層を確認してみてください。
以下の階層のようにし、[プロジェクトフォルダ]を選択するとうまくコンパイルされるようになるかもしれませんよ。

[プロジェクトフォルダ]　←ここを選択してUPLOADする
┣config.rb
┣css
┃┣print.css
┃┣ie.css
┃┗screen.css
┗scss
　┣print.scss
　┣ie.scss
　┗screen.scss