普通にCSSを書くよりも「早い」「見やすい」「メンテが楽」ということで、使い始めるともう手放せない！！でおなじみの「Compass」。
wordpressのテーマ制作にももちろん使いたい！ということで、テーマ作りの際に覚えておきたいcompassの設定のメモを共有します。

ちなみに、「compassって何？」という方には、こちらの記事がオススメです。

1. style.cssの書き出し先を変更する

まずやっておきたいのが、wordpressのテーマで一番大事なcssファイル「style.css」の書き出し先フォルダを変更すること。

compassの基本ファイル生成コマンドcompass createを実行すると、設定ファイル「config.rb」の内容は以下のデフォルト設定で生成されているはずです。

compass watchコマンドで監視するフォルダ（sassファイルの格納フォルダ）はデフォルトの「sass」のままで構いませんが、style.cssファイルをテーマフォルダの直下に置く必要があるため、cssの格納先フォルダ（css_dir）は変更が必要です。

css格納フォルダの変更方法には、以下の２つがあります。

1-1. すべてのcssファイルをテーマフォルダ直下に書き出す場合（style.cssにすべてのスタイルを記述する場合もこちら）

すべてのcssファイルをテーマ直下に置く場合、対応方法はとても簡単。設定ファイル（config.rb）のcss格納フォルダを「/」に書き換えるだけです。

これで「style.css」ファイルを含むcssファイルはすべてテーマフォルダのルートディレクトに書き出されます。
複数のcssファイルを利用せず、style.cssにすべてのスタイルを記述する場合も、この方法でOKです。

1-2. style.cssは最小限の記述のみを行い、それ以外のcssファイルは「css」フォルダで運用したい場合

子テーマで運用する場合など、環境によってはcssファイルはcssフォルダに格納する場合もあると思います。
でも、wordpressではstyle.cssだけはルートディレクトリに置く必要があります。
そういう場合、設定はデフォルトのままで、cssをコンパイルするタイミングで「style.css」をルートディレクトに移動させます。

具体的には、「config.rb」の一番上（# Require any additional compass plugins here.と書かれている箇所）に、以下の処理を記述します。

これで、cssファイルがコンパイルされるタイミング（scssファイルを保存したタイミング）で、style.cssファイルだけが「css」フォルダではなく、テーマのルートフォルダに移動されます。

2. style.cssの「テーマ詳細」の記述を、圧縮できないコメント形式に変更する

compassの売りの一つに、cssの圧縮があります。
（設定ファイル（config.rb）のoutput_styleの値を書き換えるだけで、一般的なcssの書き方である「expanded」、要素ごと一行にまとめて書き出す「compact」、すべての記述を1行に圧縮する「compressed」と、簡単に書き出し方法を変更することができる機能です。）

サイトの表示を高速化するためにも、サイト公開時のcssは「compressed」で圧縮して容量を少しでも減らしておきたいところ。
しかし、compressed形式ではcssのコメントがすべて削除されてしまうため、wordpressのstyle.cssには絶対に必要なテーマ詳細（「Theme Name」など）も消えてしまいます。もちろん、テーマ詳細が消えてしまうと、wordpressはテーマを読み込むことができません。

そこで、「compressed」形式でも削除されないコメントでテーマ詳細を記述しておく必要があります。
その方法はとても簡単で、コメント開始の/*を、/*!に書き換えるだけ。
これで、style.cssもガツンと圧縮することができます。

＜例＞

というわけで、wordpressでcompassを使いたい時には、何よりも先に「style.cssの書き出し先の変更」と「テーマ詳細を/*!形式のコメントに変更」の2点を忘れずに行いましょう！

ちなみに、、、
「０からテーマを作るぞ！」という人は、style.cssにはテーマ詳細だけを記述し、サイト内では「css」フォルダ内のまったく別のcssファイルを読み込む方法だと、すべてデフォルト設定のままcompassを使えます。
実は、これが一番楽な方法かもしれません…。