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ファイル等の指定を相対パスにするか否か。デフォルトではコメントアウトされているので、行の先頭にある#を削除することで、相対パスを利用するようにする。

Leave a Reply

Your email address will not be published. Required fields are marked *