最近、前から気になっていた「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の記法で書いてもエラーにならないので、だんだん覚えていくこともできます。しばらくはやみつきになるかも！
ということでインストールや、設定などは、こちらを参考にしました。
- CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。 | howtohp
- Coda2 と Sass とか Compass とか黒い画面とか | Webourgeon
- Compass入門 (全7回) – プログラミングならドットインストール
