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テーマのスタイルシート編集をできるようにする設定には、主に以下の手順が必要です。

  1. Rubyのインストール
  2. Koala(コアラ)というGUIコンパイラツールをインストール
  3. Koalaの設定

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

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

Rubyのインストール

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

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

RubyInstallerのダウンロード

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

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

セットアップに使用する言語の選択

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

Rubyのセットアップ

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

Rubyのパスの設定

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

Rubyセットアップの完了

Rubyの動作確認

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

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

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

Rubyのバージョン確認

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

Koalaのインストール

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

Koala

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

ダウンロード

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

Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation.

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

Amazon Cloud Drive

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

Koalaのインストーラー

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

Koalaの設定

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

Koala

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

Koalaの日本語化

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

日本語に翻訳される

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

KoalaでWordpressテーマ用の設定

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

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

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

style.scssの作成

テーマの読み込み

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

Koalaにテーマフォルダをドラッグ&ドロップ

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

テーマフォルダを読み込み

style.scssのSASS設定

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

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

オプションの設定

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

Koalaのオプション設定

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

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

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

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

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

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

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

CSSコメントを残すには

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

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

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

Commpass Mode

コンパスモード

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

設定の仕方は以下。

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

設定ファイルを作成

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

設定ファイルの作成

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

config.rbを作成しました

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

config.rbをテキストエディタで開く

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

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

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

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

コメントの表示

ラインコメント

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

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

アウトプットスタイル

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

アウトプットスタイル

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

ネスト(nested)

アウトプットスタイル(ネスト)

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

展開(expanded)

アウトプットスタイル(エキスパンド)

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

コンパクト(compact)

アウトプットスタイル(コンパクト)

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

圧縮(compressed)

アウトプットスタイル(圧縮)

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

まとめ

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

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

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

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

CSSの圧縮機能

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