WordPressのテーマ作成に Sass + compass + Gumby を使うための設定

WordPressのテーマを自作するにあたって、勉強がてらCSSフレームワークを使おうと考え、良いフレームワークが無いかと探していると「カスタマイズ性抜群！Sassに対応したCSSフレームワークがアツイ！ | 株式会社LIG」という記事を発見。

この記事と記事の最後に紹介されている「CSSの常識が変わる！「Compass」、基礎から応用まで！ | 株式会社LIG」を読み、Sassを使えばとても便利にCSSを書けることを知りました。

変数を使えたり、入れ子状に記述できたり、mixinというよく使うコードをまとめておいて一発で呼び出せる機能がとても気に入り、導入を決意。

Sassを使ったフレームワークもたくさんあり、各フレームワークの情報も少なく、どれを使うかかなり迷いましたが、ドキュメントが英語ですが、読みやすかった「Gumby」を選択。

WordPressのテーマ作成に Sass + compass + Gumby を使うために行った設定を紹介します。

環境の構築

User Interface UI Kit | Gumby Frameworkを元に導入します。

ターミナルを立ち上げ、Rubyのバージョンを確認する。バージョンが1.8.7より上ならOK。

$ ruby -v

Sass、modular-scale、Compassをインストールする。

$ sudo gem install compass modular-scale sass

Gumbyをインストール

公式サイト「Gumby – A Flexible, Responsive CSS Framework – Powered by Sass」からダウンロード。

解凍したファイル内の、「sass」「js」「img」「fonts」「css」「config.rb」のフォルダ、ファイルを自作のテーマフォルダにコピー。

私の場合は「mytheme」というテーマ名でとりあえず作成したので、その中にコピーした。

ターミナルに戻り、自作テーマのフォルダに移動。

$ cd /Users/admin/www/blog/wordpress/wp-content/themes/mytheme 

現在のフォルダ内でファイルを更新したら、compassのコンパイルを自動で行うように設定。

$ compass watch

compassの自動更新を止める場合は「Ctrl-C」で止められる。

Gumbyを使ってみる

「sass/_custom.scss」を開く。自分のCSSは基本的にこのファイルに書き込む。
下記コードを追加し保存

$color: bisque;
body{background: $color;}

「css/gumby.css」を開き最終行に下記コードが追加されているのを確認する。

body { background: bisque; }

以上でGambyを使うための設定が完了。

おわりに

とりあえずGumbyを使える所まで来ました。後は使い方をマスターしてCSSをガンガン書いていきたいと思います！