はしくれエンジニアもどきのメモ

情報・Web系技術の勉強メモ・備忘録です。

Compass インストール・プロジェクト設定・コンパイル

Compass インストール・プロジェクト設定・コンパイル

Compass のインストール、新規プロジェクトの作成、プロジェクトの設定、コンパイルについてのメモです。

Compass とは

Sassを元にしたオーサリングフレームワークです。 reset.css や便利なmixin などが使えます。

公式サイトはこちら。
Compass Home | Compass Documentation

インストール環境

今回のインストール環境は、以下です。

  • Windows7
  • Ruby: ruby 2.1.5p273 (2014-11-13 revision 48405) [i386-mingw32]
  • gem: 2.4.8
  • Sass: Sass 3.4.15 (Selective Steve)

インストール

Ruby, Sassのインストール

Sass を使うので、Ruby, Sass をインストールする必要がある。 Sass のインストールはこちら。 

cartman0.hatenablog.com

Compass のインストール

以下のコマンドでインストールできます。

        

gem install compass

gem install compass

Compass のバージョン確認

インストールできたか確認します。 バージョン確認 compass -v

新規プロジェクトの作成

まず、作業用ディレクトリを作成して、新規プロジェクトを作成します。

          

cd [作業用ディレクトリ]
compass create

createすると、以下のようなディレクトリ構成が作成されます。 ディレクトリ構成 compass create

プロジェクトの設定

config.rb がプロジェクトの設定ファイルになります。 デフォルトでは、以下のようになります。

  • css_dir: コンパイルしたCSSファイルが保存されるディレクトリ名を指定。
  • sass_dir: Sassファイルを保存するディレクトリ名を指定。
  • images_dir:画像ファイル用のディレクトリ名を指定。
  • javascripts_dir:JavaScriptファイル用のディレクトリ名を指定。

また、画像などのURL を自動で挿入してくれるCompass のヘルパー関数を使う場合、デフォルトで使うと 絶対パスになります。 相対パスで指定できるよう、config.rb に以下の設定を追加するといいです。

          

relative_assets = true

コンパイル

Compass もsass --watch のような自動コンパイル機能があります。 以下のコマンドで、ディレクトリごと監視してコンパイルできます。 config.rb で設定したようにコンパイルしてくれます。

          

compass watch

コマンドを打つと以下のようなる。 ファイルが変更されると自動でコンパイルされる。 compass watch