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」については、以下がとても参考になります。
コメントの表示
オプションの「Line Comments」にチェックが入っていることにより、「どのファイルのどの部分の設定か?」がわかりやすく表示されます。
/* line 6, style.scss */ body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
これにより、不具合があった場合でも、修正箇所を簡単に知ることができます。
アウトプットスタイル
アウトプットスタイルは、それぞれ以下のように表示されます。
それぞれのアウトプットスタイルは、以下のようになります。
ネスト(nested)
コードがネストが引き継がれてコンパイルされます。
展開(expanded)
こちらは、ネストされず一般的なCSSの書き方です。
コンパクト(compact)
それぞれのCSSセレクタの設定が、一行で表示されます。
圧縮(compressed)
コメントも取り除かれ、すべてのコードが1行に圧縮されて表示されます。
まとめ
今回、まとめるためにKoalaの機能をいろいろと触ってみました。
そして思ったのが、「最初から使っていれば、もっと楽できていたのに」ということです。
正直、こんな手軽にGUIで利用できるものがあるとは思っていませんでした。
ただSCSSは、通常のCSSでも当然ながらコンパイルできますし、Koalaには、CompressやYuiCompressを利用した、「CSS→圧縮CSS」機能もあるので、@importなどが含まれたCSSを、1つにまとめて圧縮するのにも良さそうです。
高速化にもってこいですね。