wordpress テーマ制作で scss / compass を使う時、はじめに設定すること

最近、前から気になっていた「scss」と「compass」を使い始めてみました。

まだまだ使いこなせていないまでも、初歩的なことを覚えるだけでも、グッと効率が上がります。今回はWordPressのテーマ作成を行う際に、準備しておくと使いやすい設定をまとめておきます。
使い始めなので、記述にミスがあるかもですが、その際はご指摘いただければありがたく。

また、環境は「Mac OS X Maverick ＋ coda 2」で制作しています。

なお、インストールについてはまとめておりませんので、記事末尾の参考URLをご確認いただければ。

WordPress テーマのファイル構造に合わせる

ご存知の通り、WordPressのテーマは「style.css」を元にしています。通常のテーマではcssファイルは、この「style.css」のみを利用することになります。

scss / compass では、分割されたcssファイルのインポートや統合ができますので、うまく利用すると、スタイルシートの管理がラクになります。

通常、compass コマンド「compass create」をしただけで、デフォルトの状態で初期ファイルが生成されますが、この状態だと、せっかくパーツやデザインごとにファイルを分割して管理しようとしても、全部が個別の「.cssファイル」を生成してしまいます。

これだとWordPressのテーマ作成では使いにくいので、生成するのは「style.css」だけにして、その他は自動的に「style.css」に追加される用に設定します。

まずは「config.rb」を編集する

今回は「compass create」で、デフォルトの基本ファイルを生成した後に、「config.rb」 を編集します。
デフォルト状態の「config.rb」の設定内容は、以下のようになっているので、

これを

このように書き換えて保存します。
ディレクトリの名前は、その作業内容に合わせて、変更します。

ちょっとだけ説明

• http_path ・・・ルートディレクトリ・今回の場合はテーマフォルダ
• css_dir ・・・生成したCSSファイルの書き出し先
• sass_dir ・・・compass watch コマンドで監視される「sass / scss」ファイルの格納先
• image_dir ・・・画像を格納する
• javascript_dir ・・・javascriptファイルを格納する

cssの書き出し先をテーマディレクトリと同じ指定にすることで、WordPressテーマと同じ構造になります。
「sass_dir」に「style.scss」を用意して、こちらをコンパイルすると、テーマディレクトリに「style.css」が作られ、更新されます。

パーツごとの「.scss」はアンダースコアではじまるファイル名に

ファイル名の先頭に「アンダースコア（ _ ）」をつけると、「.css」ファイルを生成しません。

本体になる「style.scss」では、すべてのパーツを「@import ファイル名」で読み込ませ、テンプレートディレクトリに「style.css」ファイルだけが生成されるようにします。

デザインやパーツごとに分割した、どの「.scss」ファイルを更新しても、自動的に「sass_dir」で指定したディレクトリは監視され、「style.css」に読み込まれ、書き足されていきます。

よく使うものは、流用できるようにしておくと便利

どのサイト制作でも絶対に必要で、サイトごとに違う設定になる「カラー関係」やWordPressなら「テーマ用の記述部分」などは分割した「.scss」ファイルにしておくと、使い回しができて便利です。
カラーは変数化した形でもっておくといいですね。

今までは、どんどん長くなりがちだった「style.css」が見やすくなった

この設定をすることによって、部分ごとにファイル化することができるので、デザインの管理や修正時の影響なども把握しやすくなりました。

導入部分さえすませてしまえば、初歩的な部分はそれほど難しくないのと、普通にcssの記法で書いてもエラーにならないので、だんだん覚えていくこともできます。しばらくはやみつきになるかも！

ということでインストールや、設定などは、こちらを参考にしました。

• CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。 | howtohp
• Coda2 と Sass とか Compass とか黒い画面とか | Webourgeon
• Compass入門 (全7回) – プログラミングならドットインストール