CSSフレームワークのCompassについて導入方法をまとめました。
環境: Mac OS X (Linux, Unix環境なら同じ手順のはずです。Rubyが必要なので、入っていない場合はインストールを。）
1. install
Terminal(Console)を起動して、インストールを行う。
$ sudo gem install compass
2. プロジェクトの作成
compassではプロジェクトという単位で作業することになる。
作業用のディレクトリに移動し、プロジェクトを作成する。
ここでは、compassProjectという名前で作成。
$ compass create compassProject
Congratulations! Your compass project has been created. と表示されれば成功。
後はcompassでコードを書いてコンパイル(compass compile)を行うのですが、
都度コンパイルするのは面倒なので、プロジェクトの資源を更新する度に自動でコンパイルを行うように設定を行う。
$ cd compassProject 先ほど作成したプロジェクトのフォルダに移動し、次のコマンドを入力する。
$ compass watch
>>> Compass is polling for changes. Press Ctrl-C to Stop.
と表示されるので、Ctrl-Zでジョブを停止し、
$ bg
でバックグラウンド実行させる。
3. CSSの作成
4. ウェブサイトへの導入
htmlファイルのheadタグ内に、次のタグを入れる。
<head>
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
* 設定変更のポイント
Compassでは、プロジェクトディレクトリ内のconfig.rbを編集することで、様々な設定変更が可能です。
とりあえずデフォルトから変えた方がいいのは、
relative_assets = true
imageファイル等の指定を相対パスにするか否か。デフォルトではコメントアウトされているので、行の先頭にある#を削除することで、相対パスを利用するようにする。