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

wpxcompass

最近、前から気になっていた「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 = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

これを

http_path = "/"
css_dir = "/"
sass_dir = "___sass"
images_dir = "images"
javascripts_dir = "js"
output_style = :expanded
line_comments = false

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

ちょっとだけ説明

  • 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の記法で書いてもエラーにならないので、だんだん覚えていくこともできます。しばらくはやみつきになるかも!

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

スポンサードリンク

SNSでもご購読できます。

Loading Facebook Comments ...

コメントを残す

*