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をお楽しみくださいませ。