Less & Sass Advent calendar 2011 の15日目です！
今日はLessにおけるMixInの活用法について書いてみようと思います。

LessのMixinについて

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

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

1
2
3
4
5

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

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

1
2
3
4
5
6

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

こんな感じで呼び出すと、それぞれ展開されて下のコードのようになります。
#headerの方は引数を渡していないので、初期値の5pxが適用されています。

1
2
3
4
5
6
7
8
9
10
11

/* 出力結果 */
#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で書くと、こんな感じになると思います。

1
2
3
4
5
6
7
8
9
10
11
12
13

@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として使用する事ができます。

1
2
3
4
5
6
7
8
9

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

1
2
3
4
5
6
7
8
9
10
11

/* 出力結果 */
.hoge {
  background-color:#333;
  color:#fff;
}
 
.fuga {
  background-color:#333;
  color:#fff;
  font-weight:bold;
}

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

Mixinで多重継承する

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

従来の書き方

1
2
3
4
5
6
7
8
9
10
11
12
13

.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、よさげです。

オマケ：無限ループの罠

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

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

1
2
3
4
5
6
7
8

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

おわり

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