KoalaというSCSS（SASS）開発補助ツールを使ってWordPressテーマの開発効率を手軽にアップする方法

SCSS便利です。

便利な機能を、いろいろ挙げるときりがありませんが、CSSで変数を使えるという、それだけでも便利すぎます。テーマカラーなどを変数に設定しておけば、後から色を変更しようと思ったら、1ヶ所で済むわけです。

そんな便利なSCSS（SASS）ですが、Railsとかで開発をしているときは、結構手軽に使えたので便利に利用していました。けれど、Wordpressのテーマ開発をした時には、設定の仕方がよくわからなくて利用しませんでした。

今思えば、最初からSCSSで開発をしておけば、かなり楽をできた部分もあるのにと、ちょっと後悔しています。

ただ次、何か作るときはSCSSを使えればと思い、SCSS（SASS）+Compassなどを使って、Windows上で手軽にWEB開発をできればと思い、その手軽な方法を調べたので、まとめて紹介したいと思います。

photo by Jeremy Keith

主な手順

SCSS（Sass）＋CompassでWordpressテーマのスタイルシート編集をできるようにする設定には、主に以下の手順が必要です。

Rubyのインストール
Koala（コアラ）というGUIコンパイラツールをインストール
Koalaの設定

KoalaというGUIツールを使えば、結構手軽にSCSS開発環境を構築できます。Windowsを使っているなら、最も手軽に環境を構築できる手段の1つではないかと思っています。

こんなツールがあったとは。

Rubyのインストール

Windowsは、デフォルトでRubyがインストールされていないので、まずはRubyをインストールする必要があります。

まずは、RubyInstaller for Windowsからファイルをダウンロードします。

ダウンロードをし終えたら、ファイル（rubyinstaller-x.x.x-x64.exe）を実行してください。

まず言語は日本語を選択します。

使用許諾契約書に同意して「次へ」ボタンを押します。

「インストール先とオプションの指定」画面で、インストール先を選択するとともに、「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れて「インストール」ボタンを押してください。

以下のような画面が出れば、インストール完了です。

Rubyの動作確認

ここで、正常にRubyがインストールされたか、動作確認をします。

コマンドプロンプトを起動して、以下を入力してEnterを押してください。

ruby -v

以下のように、Rubyのバージョンが表示されれば、正常にインストールされています。

バージョンが表示されない場合は、1度システムを再起動してみてください。

Koalaのインストール

次に、Koalaというアプリケーションをインストールします。

Koalaとは、GUIで使えるLess、Sass、Compass、CoffeeScriptのコンパイルツールです。Windowsはもとより、Linux、Macでも利用できます。

ダウンロード

まずは、Koalaより、ファイルをダウンロードします。

Amazon Cloud Driveから、以下のようにダウンロードします。

ダウンロードした、ファイル（koala_x.x.x_setup.exe）を実行すると以下のようなインストーラが起動します。インストール場所などに特にこだわりがない場合は「Next」とすべて押していけばOKです。

インストールが終了したら、Koalaを起動してください。

Koalaの設定

Koalaを起動すると、以下のようなフォームが表示されます。まずは、日本語化するために、設定ボタンをクリックします。

すると、以下のようなダイアログが表示されるので「General」から「Language」に「日本語」を選択して、Koalaを再起動します。

すると、メニューや設定など可能な箇所は、日本語で表示されます。

これで、SCSS＋Compass＋Koalaで開発できる環境は整いました。

KoalaでWordpressテーマ用の設定

次に、KoalaでWordpressテーマのstyle.cssを編集する方法を紹介します。

まずは例として「wp-theme」というフォルダを作成します。

フォルダの中には、「style.scss」という空のファイルを作成しておいてください。

テーマの読み込み

次に作成した、テーマフォルダをKoalaにドラッグ＆ドロップします。

すると、以下のようにフォルダが読み込まれ、中にある「style.scss」ファイルが表示されています。

style.scssのSASS設定

次に、個別のファイルのオプションを設定します。

「style.scss」ファイルを選択すると、右側に設定パネルが表示されるので、そこから設定を行います。

オプションパネルを拡大すると以下のようになります。

最初の設定は、こんな感じでOKかと思います。「自動コンパイル」にチェックがついていると、ファイルの保存を行うと自動で「style.css」ファイルにコンパイルされます。

設定は、後からでも自由に変更できます。

SCSSを書いてコンパイルしてみる

最後に、適当な「style.scss」を書いて「style.css」にコンパイルしてみたいと思います。

とりあえず「style.scss」には、以下のように書いてみました。

/*!
  Theme Name: WP-Theme
  Author: yhira
*/
$theme_color: red;
$link_color: blue;
$text_color: #111;
$theme_fonts: "Hiragino Kaku Gothic ProN",Meiryo,sans-serif;

body{
  font-family: $theme_fonts;
}

header{
  background-color: $theme_color;
}

#main{
  margin: 10px;

  p{
    color: $text_color;
  }

  a{
    color: $link_color;
    text-decoration: none;
  }

  img{
    border: 1px solid #eee;
  }

}

#sidebar{
  margin: 5px;

  a{
    color: $link_color;
    text-decoration: underline;
  }
}

footer{
  background-color: $theme_color;
}

すると、Koalaにより自動的に、SCSSファイルがコンパイルされ、以下のような「style.css」が自動生成されます。

/*!
  Theme Name: WP-Theme
  Author: yhira
*/
/* line 10, style.scss */
body {
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }

/* line 14, style.scss */
header {
  background-color: red; }

/* line 18, style.scss */
#main {
  margin: 10px; }
  /* line 21, style.scss */
  #main p {
    color: #111; }
  /* line 25, style.scss */
  #main a {
    color: blue;
    text-decoration: none; }
  /* line 30, style.scss */
  #main img {
    border: 1px solid #eee; }

/* line 36, style.scss */
#sidebar {
  margin: 5px; }
  /* line 39, style.scss */
  #sidebar a {
    color: blue;
    text-decoration: underline; }

/* line 45, style.scss */
footer {
  background-color: red; }

Sassの機能は豊富ですが、ネストと変数が使えるだけでも、かなり手軽になります。

CSSコメントを残すには

コメント部分に!（エクスクラメーションマーク）を付けることで、テーマ情報などで消したくないコメントを残しておくこともできます。

/*!
  Theme Name: WP-Theme
  Author: yhira
*/

Koalaのオプションの設定について

以下で、よく利用すると思われるオプションの説明をしておきます。

Compass Mode

Compassモードを利用してCompassの「config.rb」ファイルを利用して、設定を行うこともできます。

設定の仕方は以下。

「config.rb」の設定に慣れた人はこっちの方がいいのかも。

設定ファイルを作成

「config.rb」ファイルを作成するにはまず、「wp-theme」フォルダを右クリックして、「プロジェクト設定→設定ファイルを作成→For Compass」を選択してください。

すると、以下のようなダイアログが表示され、テーマフォルダ内に「config.rb」ファイルが作成されます。

「config.rb」ファイルをテキストエディタで開きます。

すると、中に以下のような箇所があるので、

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

以下のように書き換えます。

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "/"  #CSSを書き出すディレクトリ
sass_dir = "/" #SASSファイルがあるディレクトリ
images_dir = "images"  #画像用のディレクトリ
javascripts_dir = "js" #JavaScriptファイル用のディレクトリ

これで、Wordpressテーマ向けの設定はできました。開発手順の好みに合わせて、ディレクトリを変更してもOKです。

Compassの設定ファイル「config.rb」については、以下がとても参考になります。

Compassの設定ファイル「config.rb」の編集方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

Sassファイルの吐き出したCSSファイルの出力スタイルの設定は「config.rb」を書き換えることで簡単に変更出来ました。今回はconfig.rbの基本的な編集方法についてまとめてみました。

liginc.co.jp

コメントの表示

オプションの「Line Comments」にチェックが入っていることにより、「どのファイルのどの部分の設定か？」がわかりやすく表示されます。

/* line 6, style.scss */
body {
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }

これにより、不具合があった場合でも、修正箇所を簡単に知ることができます。

アウトプットスタイル

アウトプットスタイルは、それぞれ以下のように表示されます。

それぞれのアウトプットスタイルは、以下のようになります。

ネスト（nested）

コードがネストが引き継がれてコンパイルされます。

展開（expanded）

こちらは、ネストされず一般的なCSSの書き方です。

コンパクト（compact）

それぞれのCSSセレクタの設定が、一行で表示されます。

圧縮（compressed）

コメントも取り除かれ、すべてのコードが１行に圧縮されて表示されます。

まとめ

今回、まとめるためにKoalaの機能をいろいろと触ってみました。

そして思ったのが、「最初から使っていれば、もっと楽できていたのに」ということです。

正直、こんな手軽にGUIで利用できるものがあるとは思っていませんでした。

ただSCSSは、通常のCSSでも当然ながらコンパイルできますし、Koalaには、CompressやYuiCompressを利用した、「CSS→圧縮CSS」機能もあるので、@importなどが含まれたCSSを、1つにまとめて圧縮するのにも良さそうです。

高速化にもってこいですね。