この記事は賞味期限切れです。（更新から1年が経過しています）

角丸やグラデーションをCSS3で表現しようとする時、
どうしても各々の環境への対応のおかげで長いCSSになってしまいますね。
そんな時便利なのがLESSのMixin機能です。

以前も軽くとりあげたLESSですが、
繰り返し出て来る表現にはMixinを使うと大変楽です。（要するに、関数のようなものです）
何度も同じ記述を繰り返さずに済みますし、汎用性のある物ならば使い回しも容易です。

こんな感じに。

角丸

.roundrect(@r:10px){
    -webkit-border-radius:@r;
    -moz-border-radius:@r;
    border-radius:@r;
}

引数にはborder-radiusのサイズを入れてあげましょう。

使い方

.normalBlock{
    width: 320px;
    height: 240px;
    .roundrect();
}
.largeBlock
    width: 640px;
    height: 480px;
    .roundrect(20px);
}

単純なグラデーション

.vgradient(@s:#ffffff, @e:#000000){
    background: -webkit-gradient( linear, left top, left bottom, from(@s), to(@e) );
    background:-moz-linear-gradient( top, @s, @e );
}
.hgradient(@s:#ffffff, @e:#000000){
    background: -webkit-gradient( linear, left top, right top, from(@s), to(@e) );
    background:-moz-linear-gradient( left, @s, @e );
}

縦/横の2カラーストップな、ごくごくシンプルなグラデーション。
引数には、開始色/終了色を入れてあげます。

使い方

.verticalBlock{
    width:240px;
    hegiht:320px;
    .vgradient(#ccc, #fff);
}
.horizontalBlock{
    width:240px;
    height:320px;
    .hgradient(#ccc,#fff);
}

メモ：LESSは16進数のカラーを三桁で入れても、6桁に展開してくれます。

ボックスシャドウ

.boxshadow(@hLen:5px, @vLen:5px, @blur:3px, @color:#000000){
    -webkit-box-shadow : @hLen @vLen @blur @color;
    -moz-box-shadow : @hLen @vLen @blur @color;
    box-shadow : @hLen @vLen @blur @color;
}
.innershadow(@hLen:5px, @vLen:5px, @blur:3px, @color:#000000){
    -webkit-box-shadow : inset @hLen @vLen @blur @color;
    -moz-box-shadow : inset @hLen @vLen @blur @color;
    box-shadow : inset @hLen @vLen @blur @color;
}

引数は、普通にbox-shadowに渡すものと同じです。
x座標・y座標・ぼかしサイズ・カラーですね。
innershadowは、引数「inset」を追加して内側のシャドウを表現するMixinです。

使い方

.boxShadowTest{
    width:320px;
    height:240px;
    .boxshadow(1px,1px,3px,#666);
}
.innerShadowTest{
    width:320px;
    height:240px;
    .innershadow(1px,1px,3px,rgba(0,0,0,0.5));
}

引数に初期値は一応用意してありますが、しょっぱいですよ。

IEはどうするの

LESSでIEのfilterを書こうとすると、残念ながらシンタックスエラーが吐かれてしまいます。
目下修正を検討中だそうなので、今後のバージョンアップに期待ですね。

現在のLessでは ~ や e を使用する事で、filterによる表現も出来るようになっています。
bootstrap のLessのソースなどが参考になると思います。
cf) twbs/bootstrap

代わりに、ie-css3.htc等の別のライブラリの導入を検討してみましょう。
CSS3 support in Internet Explorer 6, 7, and 8

.roundrect(@r:10px){
    -webkit-border-radius:@r;
    -moz-border-radius:@r;
    border-radius:@r;
    behavior:url(ie-css3.htc);
}