Lessでよく使うスニペット

css拡張メタ言語Less。個人的によく使うスニペットの備忘録。

` /round box/ .border-radius (@topLeft: 0,@topRight: 0,@bottomLeft: 0,@bottomRight: 0){
-webkit-border-radius: @arguments;
-moz-border-radius: @arguments;
-mes-border-radius:@arguments;
border-radius: @arguments;
} /* useage
.someclass {
.border-radius(3px, 3px, 3px, 3px);
}
*/

/box shadow/ .boxshadow (@x:0,@y:0,@blur:0,@color:#000) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
-o-box-shadow: @arguments;
-ms-box-shadow: @arguments;
box-shadow: @arguments;
} /* useage
.someclass {
.boxshadow (1px, 1px, 1px, rgba(0, 0, 0, 0.5));
}
.insetclass {
.boxshadow (1px, 1px, 1px, rgba(0, 0, 0, 0.5), inset);
}
*/

/text shadow/ .textshadow (@x:0,@y:0,@blur:0,@color:#000) {
-webkit-text-shadow: @arguments;
-moz-text-shadow: @arguments;
-o-text-shadow: @arguments;
-ms-text-shadow: @arguments;
text-shadow: @arguments;
} /* useage
.someclass {
.textshadow (1px, 1px, 1px, rgba(0, 0, 0, 0.5));
}
*/

/background gradient/ .background-gradient(@start: #000,@end: #000) {
background: @end;
filter: e(“progid:DXImageTransform.Microsoft.gradient(startColorstr=’”)@start e(“‘, endColorstr=’”) @end e(“‘)”);
background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
background: -moz-linear-gradient(top, @arguments);
background-image: linear-gradient(top, @arguments);
background-image: -o-linear-gradient(top, @arguments);
background-image: -webkit-linear-gradient(top, @arguments);
background-image: -ms-linear-gradient(top, @arguments);
} /* useage
.someclass {
.background-gradient(#eee, #fff);
}
*/

/box center/ .box-center {
display: block;
margin: 0 auto;
} `

IEのactivexコントロール利用時にLessがパースエラーを起こすので
/* Less escape code : e('escape this code') */ filter: e("progid:DXImageTransform.Microsoft.gradient(startColorstr='")@start e("', endColorstr='") @end e("')");
のようにエスケープコードを使って回避できます。
さらにエスケープコード内で変数を使用する場合は、
e(%("some IE stuff here, first color %s, second color %s", @color1, @color2)) /* 最初の%sが@color1に、次の%sが@color2に置き換わります */

どうしてもvendor prefixを繰り返し書くのが面倒。
.vendor-prefix(@prop, @val) { -moz-@prop:@val; -webkit-@prop:@val; -o-@prop:@val; -ms-@prop:@val; @prop:@val; }
のようるようにならないかな。