Less/Sass/Stylus をGruntでコンパイルする

ではさっそく、GruntでCSSプリコンパイラを扱うタスクを紹介します。

• grunt-contrib-less – LessをCSSにコンパイルします
• grunt-contrib-sass – SassをCSSにコンパイルします
• grunt-contrib-stylus – StylusをCSSにコンパイルします

指定できるオプションは異なりますが、設定の仕方に差はありません。

違いを挙げるならば、Less/StylusはJavaScriptで書かれているのでnode.js上で動作させられますが、 RubyベースのSassは外部のsassコマンドを呼び出す仕組みになっており、別途インストールが必要です。 結果、Gruntとより相性が良いのはLess/Stylusであると言えますね。

ここでは、私の好きなLessを例にあげてみます。

Lessをコンパイルする（grunt-contrib-less）

基本設定

まず “grunt-contrib-less” をインストールしておきます。

$ npm install grunt-contrib-less

Gruntfile.js の内容は、例えば次のようになります。

module.exports = function(grunt){

    // grunt-contrib-less タスクの読み込み
    grunt.loadNpmTasks("grunt-contrib-less");

    grunt.initConfig({
        less : {
            // 作業のラベルは"dist"にしてみます
            dist : {
                // オプションの指定
                options : {
                    compress : true
                },
                // コンパイルするファイルの指定
                files : {
                    "./assets/css/style.css" : "./assets/less/style.less"
                }
            }
        }
    });
};

※ 基本的なタスクの書き方については 前編 にて

“options”セクションでオプションの設定を行い、 “files”セクションで出力するファイルの指定を行います。

“files”のキー（左辺）には出力先のCSSファイル、値（右辺）には元となるLessファイルへのパスを指定してください。 上の例では、 “./assets/less/style.less” がコンパイルされた結果が、”./assets/css/style.css” に保存されます。

実行

$ grunt less:dist

オプション

多く使われるであろうオプションは次の物でしょう。

• compress : Boolean (false) – 空白などを除去して圧縮します
• yuicompress : Boolean (false) – cssmin.js（YUICompressorのJS版）で圧縮します

その他のオプションについては grunt-contrib-lessのREADME を参照してください。

ファイルの更新を検知してコンパイルする（grunt-contrib-watch）

基本設定

多くのコンパイラにも実装されているファイル監視機能ですが、 Gruntでも grunt-contrib-watch というプラグインとして提供されています。

npm install grunt-contrib-watch

先ほどのLessのタスクを、ファイルを監視して実行してみます。

module.exports = function(grunt){
    grunt.loadNpmTasks("grunt-contrib-less");
    grunt.loadNpmTasks("grunt-contrib-watch");

    grunt.initConfig({
        less : {
            dist : { ... }
        },
        watch : {
            // ラベルは"less"にしてみます
            less : {
                // "files"セクションで監視するファイルの条件を指定
                files : [
                    "./assets/less/*.less"
                ],
                // "tasks"セクションで実行するタスクを指定
                tasks : [
                    "less:dist"
                ]
            }
        }
    });
};

“files”セクションで監視するファイルの条件を設定します。 そして“tasks”セクションで、“files”のファイルが更新された場合に実行するタスクを設定します。

“files”の値には、直接ファイル名を指定する他にパターンマッチングを使用する事ができ、特定ファイルの除外などの細かい設定が可能です。 詳細は公式ドキュメントにあるのでご参照ください。

cf) Globbing patterns | Configuring tasks – Grunt: The JavaScript Task Runner

実行

監視を開始するとターミナルは待機状態になります。

$ grunt watch:less
Running "watch:less" task
Waiting...

“./assets/less/” にあるLessファイルを更新すると、自動的に “less:dist” タスクを実行する様になります。

livereload もある？

私は使ったことがありませんが、livereload（ファイル更新を検知してブラウザをリロードする）を実現するプラグインもあるようです。

• gruntjs/grunt-contrib-livereload · GitHub

ここでは説明を省きますが、このプラグインは上で挙げた “grunt-contrib-watch” ではなく “grunt-regarde” の使用が推奨されるようです。

Note that grunt-contrib-livereload is designed to use grunt-regarde instead grunt-contrib-watch (mainly due to shortcomings in the watch task which doesn’t give access to changed files because it spawns tasks in subprocesses.)

GUIコンパイラでいいんじゃないの？

非常にもっともなご意見です。

本記事で挙げたCSSプリコンパイラの事例に限って言えば、 Compass、CodeKitやLess.app等、優秀なGUIコンパイラが数多くリリースされているので、 「黒い画面」が苦手な方は無理して導入する事もないと思います。

ただ、GUIコンパイラに対するGruntの優位点を挙げるとすれば、 環境を跨いでの設定の共有が極めて容易な点かな、と思っています。 nodeが動く環境ならばOS問わずどこでも同じ設定ファイルで、コマンド一発で同じ事が出来るわけです。

前編で触れたGruntの魅力に興味を持たれたならば、 これを機に「黒い画面」とのお付き合いを始めてみても良いのではないでしょうか。

まとめ

そんなわけで、最近ではGitとGruntとBowerのセットで制作を進めています。

これらの優秀なソフトウェアの開発者には足をむけて寝られませんが、 オープンソース故に多方面にいらっしゃるわけで、逆立ちして寝るしかなさそうです。

LessのMixinについて

LessにおけるMixinというのは、簡単に言うと関数のようなもので、
どこかで宣言しておけば、セレクタの中で呼び出すことが出来、
結果としてその中身がセレクタ内に展開されます。

ごちゃごちゃとわかりづらいので、公式の例を拝借します。

.rounded-corners (@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

こんな感じに宣言しておきます。()の中身は引数と初期値です。
セレクタ内で呼び出すときは…

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners( 10px );
}

こんな感じで呼び出すと、それぞれ展開されて下のコードのようになります。

“#header”の方は引数を渡していないので、初期値の5pxが適用されています。

/* 出力結果 */
#header {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#footer {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

SassのMixinとの違い

SassとLessの記法は非常に良く似ていますが、
大きく異なる点として、変数の記号（@ではなく$）と、
Mixinの書き方があげられます。

前述の例をSCSSで書くと、こんな感じになると思います。

@mixin rounded-corners( $radius:5px ){
    border-radius: $radius;
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius:$radius;
}

#header {
    @include rounded-corners;
}
#footer {
    @include rounded-corners( 10px );
}

Lessが通常のCSSクラスの記法と酷似しているのに対し、
Sassの記法は、一発でMixinとわかるような書き方になっていますね。
可読性の点ではSassの方に軍配があがりそうですが、
この記法はLessの長所の一つでもあります。

CSSクラスもMixinとして使える

LessのMixinはCSSクラスと似ているだけではなく、
普通のCSSクラスもMixinとして使用する事ができます。

// 普通のCSSクラス
.hoge {
    background-color:#333;
    color:#fff;
}
.fuga {
    .hoge;
    font-weight:bold;
}

出力結果

.hoge {
    background-color:#333;
    color:#fff;
}

.fuga {
    background-color:#333;
    color:#fff;
    font-weight:bold;
}

特別な記述をしなくても、簡単にプロパティを継承出来てしまうわけですね。
これは楽です。

Mixinで多重継承する

この仕組みは、OOCSSの様な作り方をCSSだけで行いたい場合に役立ちます。

従来の書き方

.box {
    padding:10px;
    margin:10px;
}
.dark {
    background-color:#111;
    color:#fff;
}
.rounded-corners {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

例えばこのコードで黒くて角丸なボックスを要素に適用したい場合、
次のようなHTMLになると思います。

<div class="box dark rounded-corners">
    ...
</div>

Mixinによる継承

ここでLessのMixinを使用して、一つ記述を書き足してみます。

.mybox {
    .box;
    .dark;
    .roudned-corners;
}

こうすることにより、divにあてがうクラスはよりシンプルになります。

<div class="mybox">
    ...
</div>

オブジェクト指向的なCSSを書きたいけど、HTMLはスッキリさせたい。
そんなケースによさそうです。

デメリット

HTMLはスッキリしますが、出力されるCSSはそうはいきません。
（誰が見るわけでもないかもしれませんが）

呼び出される都度、何度でも展開されるわけなので、
同じ事を繰り返して記述する、いささかしつこいCSSになるでしょう。
些細な差かもしれませんが、ファイルサイズもかさみますね。

extendをLESSに実装した例

昨日、AdventCalender14日目の@hokacchaさんが、
よりスマートなソリューションについて記事にされていたので、是非。

LESSにextendを実装してみた – hokaccha.hamalog v2

出力されるCSSが、大変いい感じになりますね。
extend、よさげです。

LESS の1.4系より、extendが公式に導入されています。
less.js/CHANGELOG.md at master · less/less.js

オマケ：無限ループの罠

ちなみに、互いにそれぞれを呼び出すMixinを作ると、
当たり前ですが無限ループに陥ってコンパイラが落ちる事もあると思いますので、
ご注意ください。

良い子は真似しちゃだめ！

.hoge {
    color:#fff;
    .fuga;
}
.fuga {
    color:#ccc;
    .hoge;
}

おわり

それでは引き続きLess & Sass Advent calendar 2011をお楽しみくださいませ。