///區塊寬高
.size(@w: auto, @h: auto) { width: @w; height: @h; }

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

///動作
.animation(@animation) { -webkit-animation: @animation; animation: @animation; }

///轉場
.transition(@prop: all, @time: .3s, @ease: ease-out) { transition: @prop @time @ease; -webkit-transition: @prop @time @ease; -moz-transition: @prop @time @ease; -o-transition: @prop @time @ease; -ms-transition: @prop @time @ease; }

///變形
.transform(@transform) { transform: @transform; -webkit-transform: @transform; -moz-transform: @transform; -ms-transform: @transform; -o-transform: @transform; }
.scale(@factor) { .transform(scale(@factor)); }
.rotate(@deg) { .transform(rotate(@deg)); }
.skew(@deg, @deg2) { .transform(skew(@deg, @deg2)); }
.translate(@x, @y:0) { .transform(translate(@x, @y)); }
.translate3d(@x, @y: 0, @z: 0) { .transform(translate3d(@x, @y, @z)); }
.perspective(@value: 1000) { -webkit-perspective: @value; -moz-perspective: @value; -ms-perspective: @value; perspective: @value; }
.transform-origin(@x:center, @y:center) { transform-origin: @x @y; -webkit-transform-origin: @x @y; -moz-transform-origin: @x @y; -ms-transform-origin: @x @y; -o-transform-origin: @x @y; }

///三角型繪製， 用法：.triangle(right, @w:20px, @c:#fff);
.triangle(top, @w: 5px, @c: #000, @style: solid){ border-width: @w; border-color: transparent transparent @c transparent; border-style: @style; } //向上三角
.triangle(bottom, @w: 5px, @c: #000, @style: solid){ border-width: @w; border-color: @c transparent transparent transparent; border-style: @style; } //向下三角
.triangle(left, @w: 5px, @c: #000, @style: solid){ border-width: @w; border-color: transparent @c transparent transparent; border-style: @style; } //向左
.triangle(right, @w: 5px, @c: #000, @style: solid){ border-width: @w; border-color:transparent transparent transparent @c; border-style: @style; } //向右
.triangle(@_, @w: 5px, @c: #000, @style: solid){ overflow: hidden; .size(0, 0); } //繼承上列

///圓形
.circular(@w: 100px) { .size(@w, @w); .rounded-corners(50%); }

///平行四邊形
.parallelogram(@w, @h, @skew1, @skew2){ .size(@w, @w); .skew(@skew1, @skew2); }