Compassの準備

Compassを使用するにあたり下準備を。

コマントプロントでインストール

コマンドプロントを開いてcompassをインストール(環境はmacです)

sudo install compass



インストールが完成したかどうかをバージョン情報で確認。

compass -v



アップデートをする場合もsassの時と同様。"sass"の代わりに"compass"になるだけ。

sudo update compass


プロジェクトを作成

インストール後、Compassプロジェクト(コンパイル操作するためのディレクトリフォルダ環境)を作成します。
プロジェクトを作成する場所を指定するのにwindowsだとパスを直に入力しなければなりませんが

macならfinder上でディレクトリフォルダーをターミナルにドラッグ&ドロップすると...

手打ち入力なしでそのまま表示してくれる。



またそれ以外にも、finder上でフォルダを直にDock上のターミナルにドラッグ&ドロップしても

このようにドラッグ元のフォルダのパスを指定した状態で操作できる。



プロジェクトフォルダの場所指定ができたら、これからターミナルでプロジェクトを作成します。

compass create

これでCompassの設定ファイルとSassファイルとコンパイル後のファイルなどが一式作成できました。

中身は

  • cofig.rb...設定ファイル。

.rb拡張子はRubyファイルの拡張子
主な記述内容はプラグインパスの指定が書かれている冒頭部分

    • http_path = "/"・・・・・・・・・・・・・・・・(プロジェクトのパス)
    • css_dir = "stylesheets"・・・・・・・・・・・・・・・・(CSSファイルのパス)
    • sass_dir = "sass"・・・・・・・・・・・・・・・・(Sassファイルのパス)
    • images_dir = "images"・・・・・・・・・・・・・・・・(画像ファイルのパス)
    • javascripts_dir = "javascripts"・・・・・・・・・・・・・・・・(javascriptファイルのパス)



それぞれのパス指定はここで設定します。
compass createで作成したばかりのcofig.rbですとcssファイルとsassファイルの指定場所がデフォルトで合っていますので特に入力するところはありません。



上記2つのフォルダにはそれぞれ拡張子の異なる

    • ie.拡張子名
    • print.拡張子名
    • screen.拡張子名



がデフォルトで入っておりますが、ieIE対策用。printは印刷用。
screenはwebで閲覧するディスプレイ用となっています。
基本screenファイルでcompassを使います。(名前変更可能)



これでCompassの初期設定は終了です。
KoalaでもCompassは対応しているので、ターミナルでのコンパイル作業などは省略します。