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 のインストールはこちら。
Compass のインストール
以下のコマンドでインストールできます。
gem install compass
Compass のバージョン確認
インストールできたか確認します。
新規プロジェクトの作成
まず、作業用ディレクトリを作成して、新規プロジェクトを作成します。
cd [作業用ディレクトリ]
compass create
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
コマンドを打つと以下のようなる。 ファイルが変更されると自動でコンパイルされる。
参考リンク