LESSのMixin

こんばんは。

先日lessのファイルを読んでいたところ、

.box-shadow( ... )　的な一行があって

なんだこれは？となりました。

.がついているからclassのセレクタかとおもいきや、

()がついているから関数…？？？？

これはMixin（ミックスインorミクシン）というものだそうです。

Mixinは、色々まとめたCSSをどこかで宣言しておくことで、

セレクタの中で利用できる関数みたいなものらしいです。

例）

■LESSファイル

.border-radius (@radius) {
　　border-radius: @radius;
　　-moz-border-radius: @radius;
　　-webkit-border-radius: @radius;
}

#header {
　　.border-radius(10px);
}

■作られるCSSファイル

#header {
　　border-radius: 10px;
　　-moz-border-radius: 10px;
　　-webkit-border-radius: 10px;
}

ついでに。

LESSのMixinは、普通のCSSクラスを書いても継承できるらしい。。

例）

■LESSファイル

.index_page {
　　display: block;
　　width: 300px;
　　height: 400px;
}

.input_page {
　　.index_page;
　　background-color: #cccccc;
}

■作られるCSSファイル

.index_page {
　　display: block;
　　width: 300px;
　　height: 400px;
}

.input_page {
　　display: block;
　　width: 300px;
　　height: 400px;
　　background-color: #cccccc;
}