compatibility

提供基础的兼容性封装。

依赖于：

variables

.inline-block()

让元素表现为 display: inline-block 的状态，IE 6/7 下通过 zoom: 1 模拟。
.box-sizing()
-prefix
设定盒模型的计算方式。
- .box-sizing(@sizing)
  @sizing 模型计算方式，可以为 border-box / padding-box / content-box。
  前往 estFiddle 查看
```
.box {
    .box-sizing(border-box);
}
```
```
.box {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
```

`.placeholder()`

-prefix

设定文本输入框占位符的颜色。

`.placeholder(@color)`

@color 文字颜色。可选，默认值：@default-input-placeholder-color。

前往 estFiddle 查看

textarea {
    .placeholder(lightblue);
}

textarea::-webkit-input-placeholder {
    color: lightblue;
}

textarea:-moz-placeholder {
    color: lightblue;
}

textarea::-moz-placeholder {
    color: lightblue;
}

textarea:-ms-input-placeholder {
    color: lightblue;
}

.user-select()
-prefix
设定处理选区的方式。
- .user-select(@type)
  @type 处理选区的方式。可用取值有 text / none。
  前往 estFiddle 查看
```
.menu-item {
    .user-select(none);
}
```
```
.menu-item {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
```
  user-select 目前没有出现在任何 W3C 官方的规范中，浏览器厂商的实现可能会有细节上的差异，目前不建议使用除 text 和 none 以外的任何值。
.opacity()

设定不透明度。
- .opacity(@opacity)
  @opacity 不透明度值。可取 0 – 100（可以带 %）。
  前往 estFiddle 查看
```
.overlay {
    .opacity(70%);
}
```
```
.overlay {
    opacity: 0.7;
    filter: alpha(opacity=70);
}
```

`.rgba-background()`

设定半透明背景色。

`.rgba-background(@rgba)`

@rgba RGBA 格式色值。

前往 estFiddle 查看

.overlay {
    .rgba-background(rgba(0, 0, 0, 0.7));
}

.overlay {
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) repeat\0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3000000,endColorstr=#b3000000)\0;
    zoom: 1\0;
    background: rgba(0, 0, 0, 0.7);
}

:root .overlay {
    filter: none\9;
}

`.rgba-background(@color, @opacity)`

@color 不带 alpha 通道的色值。 @opacity 不透明度。可取 0 – 100（可以带 %）。

前往 estFiddle 查看

.overlay {
    .rgba-background(#000, 70%);
}

.overlay {
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) repeat\0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3000000,endColorstr=#b3000000)\0;
    zoom: 1\0;
    background: rgba(0, 0, 0, 0.7);
}

:root .overlay {
    filter: none\9;
}

`.border-radius()`

-prefix

设定圆角。

`.border-radius(@radius)`

@radius 圆角半径。可包含 1 – 4 个空格分隔的半径值同时指定多个角的圆角半径。可选，默认值：@default-border-radius。

前往 estFiddle 查看

.box-one {
    .border-radius(3px);
}

.box-two {
    .border-radius(3px 2px);
}

.box-one {
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}

.box-two {
    -webkit-border-radius: 3px 2px;
       -moz-border-radius: 3px 2px;
            border-radius: 3px 2px;
}

`.border-radius(@radius-x, @radius-y)`

@radius-x 水平方向的圆角半径。可含 1–4 个空格分隔的半径值同时指定多个角的圆角半径。 @radius-y 垂直方向的圆角半径。可含 1–4 个空格分隔的半径值同时指定多个角的圆角半径。

前往 estFiddle 查看

.box-one {
    .border-radius(3px, 5px);
}

.box-two {
    .border-radius(3px 6px, 5px 5px 3px 3px);
}

.box-one {
    -webkit-border-radius: 3px / 5px;
       -moz-border-radius: 3px / 5px;
            border-radius: 3px / 5px;
}

.box-two {
    -webkit-border-radius: 3px 6px / 5px 5px 3px 3px;
       -moz-border-radius: 3px 6px / 5px 5px 3px 3px;
            border-radius: 3px 6px / 5px 5px 3px 3px;
}

`.border-top-left-radius()`

-prefix

设定左上角圆角半径。

`.border-top-left-radius(@radius)`

@radius 圆角半径。可选，默认值：@default-border-radius。

前往 estFiddle 查看

.box {
    .border-top-left-radius(3px);
}

.box {
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
            border-top-left-radius: 3px;
}

`.border-top-leftradius(@radius-x, @radius-y)`

@radius-x 水平方向的圆角半径。 @radius-y 垂直方向的圆角半径。

前往 estFiddle 查看

.box {
    .border-top-left-radius(3px);
}

.box {
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
            border-top-left-radius: 3px;
}

.border-top-right-radius()
-prefix
设定右上角圆角半径。

参数说明请参考 .border-top-left-radius()。
.border-bottom-right-radius()
-prefix
设定右下角圆角半径。

参数说明请参考 .border-top-left-radius()。
.border-bottom-left-radius()
-prefix
设定左下角圆角半径。

参数说明请参考 .border-top-left-radius()。
.border-top-radius()

设定左上角和右上角圆角半径。

参数说明请参考 .border-top-left-radius()。
.border-right-radius()

设定右上角和右下角圆角半径。

参数说明请参考 .border-top-left-radius()。
.border-bottom-radius()

设定左下角和右下角圆角半径。

参数说明请参考 .border-top-left-radius()。
.border-left-radius()

设定左上角和左下角圆角半径。

参数说明请参考 .border-top-left-radius()。

`.box-shadow()`

-prefix

设定元素的阴影，支持多个阴影。

`.box-shadow(@shadow, ...)`

@shadow 单个阴影参数。可选，默认值：@default-box-shadow。

前往 estFiddle 查看

.box-one {
    .box-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

.box-two {
    .box-shadow(0 -1px 0 #000, inset 0 1px 1px rgb(255, 0, 0));
}

.box-one {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.box-two {
    -webkit-box-shadow: 0 -1px 0 #000000, inset 0 1px 1px #ff0000;
       -moz-box-shadow: 0 -1px 0 #000000, inset 0 1px 1px #ff0000;
            box-shadow: 0 -1px 0 #000000, inset 0 1px 1px #ff0000;
}

`.transition()`

-prefix

过渡（transition）设定。

`.transition(@transition, ...)`

@transition 单个过渡设定。

前往 estFiddle 查看

.box-one {
    .transition(background-color 1s linear);
}

.box-two {
    .transition(height 0.5s ease, opacity 2s linear 0.5s);
}

.box-one {
    -webkit-transition: background-color 1s linear;
       -moz-transition: background-color 1s linear;
         -o-transition: background-color 1s linear;
            transition: background-color 1s linear;
}

.box-two {
    -webkit-transition: height 0.5s ease, opacity 2s linear 0.5s;
       -moz-transition: height 0.5s ease, opacity 2s linear 0.5s;
         -o-transition: height 0.5s ease, opacity 2s linear 0.5s;
            transition: height 0.5s ease, opacity 2s linear 0.5s;
}

`.transition-property()`

-prefix

设定过渡（transition）影响的属性。

`.transition-property(@property, ...)`

@property 参与单个过渡的属性名称。

前往 estFiddle 查看

.box-one {
    .transition-property(background-color);
}

.box-two {
    .transition-property(height, opacity);
}

.box-one {
    -webkit-transition-property: background-color;
       -moz-transition-property: background-color;
         -o-transition-property: background-color;
            transition-property: background-color;
}

.box-two {
    -webkit-transition-property: height, opacity;
       -moz-transition-property: height, opacity;
         -o-transition-property: height, opacity;
            transition-property: height, opacity;
}

可以参与过渡的属性列表参见 Animatable properties from CSS。

`.transition-duration()`

-prefix

设定过渡（transition）的持续时间。

`.transition-duration(@duration, ...)`

@duration 单个过渡的持续时间。

前往 estFiddle 查看

.box-one {
    .transition-duration(1s);
}

.box-two {
    .transition-duration(0.5s, 2s);
}

.box-one {
    -webkit-transition-duration: 1s;
       -moz-transition-duration: 1s;
         -o-transition-duration: 1s;
            transition-duration: 1s;
}

.box-two {
    -webkit-transition-duration: 0.5s, 2s;
       -moz-transition-duration: 0.5s, 2s;
         -o-transition-duration: 0.5s, 2s;
            transition-duration: 0.5s, 2s;
}

`.transition-timing-function()`

-prefix

设定过渡（transition）的时间函数。

`.transition-timing-function(@timing-function, ...)`

@timing-function 单个过渡的时间函数。

前往 estFiddle 查看

.box-one {
    .transition-timing-function(linear);
}

.box-two {
    .transition-timing-function(ease, linear);
}

.box-one {
    -webkit-transition-timing-function: linear;
       -moz-transition-timing-function: linear;
         -o-transition-timing-function: linear;
            transition-timing-function: linear;
}

.box-two {
    -webkit-transition-timing-function: ease, linear;
       -moz-transition-timing-function: ease, linear;
         -o-transition-timing-function: ease, linear;
            transition-timing-function: ease, linear;
}

`.transition-delay()`

-prefix

设定过渡（transition）的延迟时间。

`.transition-delay(@delay, ...)`

@delay 单个过渡的延迟时间。

前往 estFiddle 查看

.box-one {
    .transition-delay(0s);
}

.box-two {
    .transition-delay(0s, 0.5s);
}

.box-one {
    -webkit-transition-delay: 0s;
       -moz-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;
}

.box-two {
    -webkit-transition-delay: 0s, 0.5s;
       -moz-transition-delay: 0s, 0.5s;
         -o-transition-delay: 0s, 0.5s;
            transition-delay: 0s, 0.5s;
}

`.animation()`

-prefix

动画（animation）设定。

`.animation(@animation, ...)`

@animation 单个动画设定。

前往 estFiddle 查看

.box-one {
    .animation(rotate 2s linear);
}

.box-two {
    .animation(fly-in 0.5s ease-out, fade-in 0.5s ease-out);
}

.box-one {
    -webkit-animation: rotate 2s linear;
       -moz-animation: rotate 2s linear;
         -o-animation: rotate 2s linear;
            animation: rotate 2s linear;
}

.box-two {
    -webkit-animation: fly-in 0.5s ease-out, fade-in 0.5s ease-out;
       -moz-animation: fly-in 0.5s ease-out, fade-in 0.5s ease-out;
         -o-animation: fly-in 0.5s ease-out, fade-in 0.5s ease-out;
            animation: fly-in 0.5s ease-out, fade-in 0.5s ease-out;
}

`.animation-name()`

-prefix

设定动画（animation）对应的 @keyframes 规则名称。

`.animation-name(@name, ...)`

@name 单个动画对应的 @keyframes 规则名称。

前往 estFiddle 查看

.box-one {
    .animation-name(rotate);
}

.box-two {
    .animation-name(fly-in, fade-in);
}

.box-one {
    -webkit-animation-name: rotate;
       -moz-animation-name: rotate;
         -o-animation-name: rotate;
            animation-name: rotate;
}

.box-two {
    -webkit-animation-name: fly-in, fade-in;
       -moz-animation-name: fly-in, fade-in;
         -o-animation-name: fly-in, fade-in;
            animation-name: fly-in, fade-in;
}

`.animation-duration()`

-prefix

设定动画（animation）的持续时间。

`.animation-duration(@duration, ...)`

@duration 单个动画的持续时间。

前往 estFiddle 查看

.box-one {
    .animation-duration(3s);
}

.box-two {
    .animation-duration(0.5s, 3s);
}

.box-one {
    -webkit-animation-duration: 3s;
       -moz-animation-duration: 3s;
         -o-animation-duration: 3s;
            animation-duration: 3s;
}

.box-two {
    -webkit-animation-duration: 0.5s, 3s;
       -moz-animation-duration: 0.5s, 3s;
         -o-animation-duration: 0.5s, 3s;
            animation-duration: 0.5s, 3s;
}

`.animation-timing-function()`

-prefix

设定动画（animation）的时间函数。

`.animation-timing-function(@timing-function, ...)`

@timing-function 单个动画的时间函数。

前往 estFiddle 查看

.box-one {
    .animation-timing-function(linear);
}

.box-two {
    .animation-timing-function(ease, linear);
}

.box-one {
    -webkit-animation-timing-function: linear;
       -moz-animation-timing-function: linear;
         -o-animation-timing-function: linear;
            animation-timing-function: linear;
}

.box-two {
    -webkit-animation-timing-function: ease, linear;
       -moz-animation-timing-function: ease, linear;
         -o-animation-timing-function: ease, linear;
            animation-timing-function: ease, linear;
}

`.animation-iteration-count()`

-prefix

设定动画（animation）的循环次数。

`.animation-iteration-count(@count, ...)`

@count 单个动画的循环次数。

前往 estFiddle 查看

.box-one {
    .animation-iteration-count(5);
}

.box-two {
    .animation-iteration-count(3, infinite);
}

.box-one {
    -webkit-animation-iteration-count: 5;
       -moz-animation-iteration-count: 5;
         -o-animation-iteration-count: 5;
            animation-iteration-count: 5;
}

.box-two {
    -webkit-animation-iteration-count: 3, infinite;
       -moz-animation-iteration-count: 3, infinite;
         -o-animation-iteration-count: 3, infinite;
            animation-iteration-count: 3, infinite;
}

`.animation-direction()`

-prefix

设定动画（animation）播放的正反方向。

`.animation-direction(@direction, ...)`

@direction 单个动画播放的正反方向。

前往 estFiddle 查看

.box-one {
    .animation-direction(reverse);
}

.box-two {
    .animation-direction(normal, alternate);
}

.box-one {
    -webkit-animation-direction: reverse;
       -moz-animation-direction: reverse;
         -o-animation-direction: reverse;
            animation-direction: reverse;
}

.box-two {
    -webkit-animation-direction: normal, alternate;
       -moz-animation-direction: normal, alternate;
         -o-animation-direction: normal, alternate;
            animation-direction: normal, alternate;
}

`.animation-play-state()`

-prefix

设定动画（animation）的播放状态。

`.animation-play-state(@state, ...)`

@state 单个动画的播放状态。

前往 estFiddle 查看

.box-one {
    .animation-play-state(paused);
}

.box-two {
    .animation-play-state(paused, running);
}

.box-one {
    -webkit-animation-play-state: paused;
       -moz-animation-play-state: paused;
         -o-animation-play-state: paused;
            animation-play-state: paused;
}

.box-two {
    -webkit-animation-play-state: paused, running;
       -moz-animation-play-state: paused, running;
         -o-animation-play-state: paused, running;
            animation-play-state: paused, running;
}

`.animation-delay()`

设定动画（animation）的播放延迟时间。

-prefix

`.animation-delay(@delay, ...)`

@delay 单个动画的播放延迟时间。

前往 estFiddle 查看

.box-one {
    .animation-delay(2s);
}

.box-two {
    .animation-delay(0s, 1s);
}

.box-one {
    -webkit-animation-delay: 2s;
       -moz-animation-delay: 2s;
         -o-animation-delay: 2s;
            animation-delay: 2s;
}

.box-two {
    -webkit-animation-delay: 0s, 1s;
       -moz-animation-delay: 0s, 1s;
         -o-animation-delay: 0s, 1s;
            animation-delay: 0s, 1s;
}

`.animation-fill-mode()`

-prefix

设定动画（animation）的属性填充方式。

`.animation-fill-mode(@mode, ...)`

@mode 单个动画的属性填充方式。

前往 estFiddle 查看

.box-one {
    .animation-fill-mode(backwards);
}

.box-two {
    .animation-fill-mode(forwards, both);
}

.box-one {
    -webkit-animation-fill-mode: backwards;
       -moz-animation-fill-mode: backwards;
         -o-animation-fill-mode: backwards;
            animation-fill-mode: backwards;
}

.box-two {
    -webkit-animation-fill-mode: forwards, both;
       -moz-animation-fill-mode: forwards, both;
         -o-animation-fill-mode: forwards, both;
            animation-fill-mode: forwards, both;
}

`.transform()`

-prefix

变换（transform）操作。

`.transform(@transform-function, ...)`

@transform-function 变换函数。

前往 estFiddle 查看

.box-one {
    .transform(matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0));
}

.box-two {
    .transform(translateX(10px), rotate(10deg), translateY(5px));
}

.box-one {
    -webkit-transform: matrix(1, 2, 3, 4, 5, 6);
       -moz-transform: matrix(1, 2, 3, 4, 5, 6);
        -ms-transform: matrix(1, 2, 3, 4, 5, 6);
         -o-transform: matrix(1, 2, 3, 4, 5, 6);
            transform: matrix(1, 2, 3, 4, 5, 6);
}

.box-two {
    -webkit-transform: translateX(10px) rotate(10deg) translateY(5px);
       -moz-transform: translateX(10px) rotate(10deg) translateY(5px);
        -ms-transform: translateX(10px) rotate(10deg) translateY(5px);
         -o-transform: translateX(10px) rotate(10deg) translateY(5px);
            transform: translateX(10px) rotate(10deg) translateY(5px);
}

`.transform-style()`

-prefix

设定变换是否支持 3D。

`.transform-style(@style)`

@style 对 3D 变换的支持方式。

前往 estFiddle 查看

.box {
    .transform-style(preserve-3d);
}

.box {
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

`.transform-origin()`

-prefix

设定变换的坐标原点。

`.transform-origin(@origin)`

@origin 坐标原点位置。

前往 estFiddle 查看

.box-one {
    .transform-origin(2px left);
}

.box-two {
    .transform-origin(2px 30% 10px);
}

.box-one {
    -webkit-transform-origin: 2px left;
       -moz-transform-origin: 2px left;
        -ms-transform-origin: 2px left;
         -o-transform-origin: 2px left;
            transform-origin: 2px left;
}

.box-two {
    -webkit-transform-origin: 2px 30% 10px;
       -moz-transform-origin: 2px 30% 10px;
        -ms-transform-origin: 2px 30% 10px;
         -o-transform-origin: 2px 30% 10px;
            transform-origin: 2px 30% 10px;
}

`.backface-visibility()`

-prefix

设定3D变换后元素背面是否可见。

`.backface-visibility(@visibility)`

@visibility 背面是否可见。

前往 estFiddle 查看

.box {
    .backface-visibility(hidden);
}

.box {
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
}

`.perspective()`

-prefix

设定透视距离。

`.perspective(@d)`

@d 透视距离。

前往 estFiddle 查看

.box {
    .perspective(1500px);
}

.box {
    -webkit-perspective: 1500px;
       -moz-perspective: 1500px;
            perspective: 1500px;
}

`.matrix()`

根据指定的矩阵进行 2D 变换。

`.matrix(@a, @b, @c, @d, @tx, @ty)`

前往 estFiddle 查看

.box {
    .matrix(1, -0.2, 0, 1, 0, 0);
}

.box {
    -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
       -moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
        -ms-transform: matrix(1, -0.2, 0, 1, 0, 0);
         -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
            transform: matrix(1, -0.2, 0, 1, 0, 0);
}

参数含义及写法请参考 transform-function - CSS | MDN。

`.translate()`

进行 2D 平移变换。

`.translate(@tx, @ty)`

@tx X 轴方向上的平移距离。 @ty Y 轴方向上的平移距离。

前往 estFiddle 查看

.box {
    .translate(30px, 50px);
}

.box {
    -webkit-transform: translate(30px, 50px);
       -moz-transform: translate(30px, 50px);
        -ms-transform: translate(30px, 50px);
         -o-transform: translate(30px, 50px);
            transform: translate(30px, 50px);
}

`.translateX()`

进行 X 轴方向上的平移变换。

`.translateX(@tx)`

@tx 平移距离。

前往 estFiddle 查看

.box {
    .translateX(80px);
}

.box {
    -webkit-transform: translateX(80px);
       -moz-transform: translateX(80px);
        -ms-transform: translateX(80px);
         -o-transform: translateX(80px);
            transform: translateX(80px);
}

等价于 .translate(@tx) 及 .translate(@tx, 0)。

`.scale()`

进行 2D 缩放变换。

`.scale(@sx, @sy)`

@sx X 轴方向上的缩放比例。 @sy Y 轴方向上的缩放比例。

前往 estFiddle 查看

.box {
    .scale(2.1, 4);
}

.box {
    -webkit-transform: scale(2.1, 4);
       -moz-transform: scale(2.1, 4);
        -ms-transform: scale(2.1, 4);
         -o-transform: scale(2.1, 4);
            transform: scale(2.1, 4);
}

`.scaleY()`

进行 Y 轴方向上的缩放变换。

`.scaleY(@sy)`

@sy 缩放比例。

前往 estFiddle 查看

.box {
    .scaleY(2.7);
}

.box {
    -webkit-transform: scaleY(2.7);
       -moz-transform: scaleY(2.7);
        -ms-transform: scaleY(2.7);
         -o-transform: scaleY(2.7);
            transform: scaleY(2.7);
}

`.rotate()`

进行 2D 旋转变换。

`.rotate(@angle)`

@angle 旋转角度。

前往 estFiddle 查看

.box {
    .rotate(30deg);
}

.box {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
            transform: rotate(30deg);
}

`.skew()`

进行 2D 倾斜拉伸变换。

`.skew(@ax, @ay)`

@ax 沿 X 轴倾斜拉伸的角度。 @ay 沿 Y 轴倾斜拉伸的角度。

前往 estFiddle 查看

.box {
    .skew(30deg, 15deg);
}

.box {
    -webkit-transform: skew(30deg, 15deg);
       -moz-transform: skew(30deg, 15deg);
        -ms-transform: skew(30deg, 15deg);
         -o-transform: skew(30deg, 15deg);
            transform: skew(30deg, 15deg);
}

须注意 skew 的行为与 skewX 叠加上 skewY 并不等价。

`.skewY()`

沿 Y 轴倾斜拉伸的角度。

`.skewY(@ay)`

@ay 倾斜拉伸的角度。

前往 estFiddle 查看

.box {
    .skewY(15deg);
}

.box {
    -webkit-transform: skewY(15deg);
       -moz-transform: skewY(15deg);
        -ms-transform: skewY(15deg);
         -o-transform: skewY(15deg);
            transform: skewY(15deg);
}

`.matrix3d()`

根据指定的矩阵进行 3D 变换。

`.matrix3d(@a1, @b1, @c1, @d1, @a2, @b2, @c2, @d2, @a3, @b3, @c3, @d3, @a4, @b4, @c4, @d4)`

前往 estFiddle 查看

.box {
    .matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

.box {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
       -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        -ms-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
         -o-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

参数含义及写法请参考 transform-function - CSS | MDN。

`.translate3d()`

进行 3D 平移变换。

`.translate3d(@tx, @ty, @tz)`

@tx X 轴方向上的平移距离。 @ty Y 轴方向上的平移距离。 @tz Z 轴方向上的平移距离。

前往 estFiddle 查看

.box {
    .translate3d(12px, 50%, 3em);
}

.box {
    -webkit-transform: translate3d(12px, 50%, 3em);
       -moz-transform: translate3d(12px, 50%, 3em);
        -ms-transform: translate3d(12px, 50%, 3em);
         -o-transform: translate3d(12px, 50%, 3em);
            transform: translate3d(12px, 50%, 3em);
}

`.scale3d()`

进行 3D 缩放变换。

`.scale3d(@sx, @sy, @sz)`

@sx X 轴方向上的缩放比例。 @sy Y 轴方向上的缩放比例。 @sz Z 轴方向上的缩放比例。

前往 estFiddle 查看

.box {
    .scale3d(2.5, 1.2, 0.3);
}

.box {
    -webkit-transform: scale3d(2.5, 1.2, 0.3);
       -moz-transform: scale3d(2.5, 1.2, 0.3);
        -ms-transform: scale3d(2.5, 1.2, 0.3);
         -o-transform: scale3d(2.5, 1.2, 0.3);
            transform: scale3d(2.5, 1.2, 0.3);
}

`.rotate3d()`

进行 3D 旋转变换。

`.rotate3d(@x, @y, @z, @angle)`

@x 旋转轴方向向量在 X 轴方向上的分量。 @y 旋转轴方向向量在 Y 轴方向上的分量。 @z 旋转轴方向向量在 Z 轴方向上的分量。 @angle 旋转角度。

前往 estFiddle 查看

.box {
    .rotate3d(1, 2.0, 3.0, 10deg);
}

.box {
    -webkit-transform: rotate3d(1, 2, 3, 10deg);
       -moz-transform: rotate3d(1, 2, 3, 10deg);
        -ms-transform: rotate3d(1, 2, 3, 10deg);
         -o-transform: rotate3d(1, 2, 3, 10deg);
            transform: rotate3d(1, 2, 3, 10deg);
}

`.rotateZ()`

绕 Z 轴方向进行旋转变换。

`.rotateZ(@angle)`

@angle 旋转角度。

前往 estFiddle 查看

.box {
    .rotateZ(60deg);
}

.box {
    -webkit-transform: rotateZ(60deg);
       -moz-transform: rotateZ(60deg);
        -ms-transform: rotateZ(60deg);
         -o-transform: rotateZ(60deg);
            transform: rotateZ(60deg);
}

等价于 .rotate3d(0, 0, 1, @angle) 及 .rotate(@angle)。

`.background-clip()`

-prefix

设定背景渲染范围。可以分别指定多个背景的渲染范围。

`.background-clip(@clip, ...)`

@clip 单个背景的渲染范围。

前往 estFiddle 查看

.box-one {
    .background-clip(padding-box);
}

.box-two {
    .background-clip(border-box, content-box);
}

.box-one {
    -webkit-background-clip: padding-box;
       -moz-background-clip: padding;
         -o-background-clip: padding-box;
            background-clip: padding-box;
}

.box-two {
    -webkit-background-clip: border-box, content-box;
       -moz-background-clip: border, content;
         -o-background-clip: border-box, content-box;
            background-clip: border-box, content-box;
}

`.background-size()`

-prefix

设定背景的尺寸。可以分别指定多个背景的尺寸。

`.background-size(@size, ...)`

@size

前往 estFiddle 查看

.box-one {
    .background-size(cover);
}

.box-two {
    .background-size(50% auto, contain);
}

.box-one {
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

.box-two {
    -webkit-background-size: 50% auto, contain;
       -moz-background-size: 50% auto, contain;
         -o-background-size: 50% auto, contain;
            background-size: 50% auto, contain;
}

`.background-origin()`

-prefix

设定背景的起止范围，可以分别指定多个背景的范围。

`.background-origin(@origin, ...)`

@origin

前往 estFiddle 查看

.box-one {
    .background-origin(border-box);
}

.box-two {
    .background-origin(border-box, padding-box);
}

.box-one {
    -webkit-background-origin: border-box;
       -moz-background-origin: border;
         -o-background-origin: border-box;
            background-origin: border-box;
}

.box-two {
    -webkit-background-origin: border-box, padding-box;
       -moz-background-origin: border, padding;
         -o-background-origin: border-box, padding-box;
            background-origin: border-box, padding-box;
}

`.linear-gradient()`

-prefix

设定线性渐变的背景。

`.linear-gradient(@direction, @color-stops...)`

@direction 渐变线的方向。取值可以是角度值，也可以使用关键字，如 to top / to right / to bottom left等。可参考 linear-gradient() Syntax。 @color-stops 色标，至少有两个参数值。写法可参考 Gradient Color-Stops。

前往 estFiddle 查看

.box-one {
    .linear-gradient(to right, white, black);
}

.box-two {
    .linear-gradient(to top right, white, black);
}

.box-three {
    .linear-gradient(273deg, red, yellow 30%, green 70%, purple);
}

.box-one {
    background-image: -webkit-linear-gradient(left, white, black);
    background-image: -moz-linear-gradient(left, white, black);
    background-image: -moz-linear-gradient(to right, white, black);
    background-image: -o-linear-gradient(to right, white, black);
    background-image: linear-gradient(to right, white, black);
    background-repeat: repeat;
}

.box-two {
    background-image: -webkit-linear-gradient(bottom left, white, black);
    background-image: -moz-linear-gradient(bottom left, white, black);
    background-image: -moz-linear-gradient(to top right, white, black);
    background-image: -o-linear-gradient(to top right, white, black);
    background-image: linear-gradient(to top right, white, black);
    background-repeat: repeat;
}

.box-three {
    background-image: -webkit-linear-gradient(177deg, red, yellow 30%, green 70%, purple);
    background-image: -moz-linear-gradient(177deg, red, yellow 30%, green 70%, purple);
    background-image: -o-linear-gradient(177deg, red, yellow 30%, green 70%, purple);
    background-image: linear-gradient(273deg, red, yellow 30%, green 70%, purple);
    background-repeat: repeat;
}

由于支持方向设定，不支持采用老 WebKit 的语法（Introducing CSS Gradients）的浏览器（Chrome 10-），且不使用 filter 语法在 IE 10 以下浏览器中进行模拟。

需要特别注意的是，当使用 to <corner> 这样的写法（例如 to top right）来指定渐变线角度时，已经支持此语法的浏览器渲染效果将与采用 <corner> 语法的浏览器有差异。效果差异见此邮件：[css3-images] Gradient Magic 中的配图（新标准效果对应图中的“magic”效果）。

`.horizontal-gradient()`

设定水平方向（从左到右）双色线性渐变的背景。

`.horizontal-gradient(@start-color, @end-color)`

@start-color 起始颜色。 @end-color 结束颜色。

前往 estFiddle 查看

.box {
    .horizontal-gradient(black, white);
}

.box {
    background-image: -webkit-gradient(linear, left top, right top, from(black), to(white));
    background-image: -webkit-linear-gradient(left, black, white);
    background-image: -moz-linear-gradient(left, black, white);
    background-image: -o-linear-gradient(left, black, white);
    background-image: linear-gradient(to right, black, white);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#ff000000', endColorstr='#ffffffff', GradientType=1);
}

支持采用老 WebKit 语法的浏览器，并在 IE 10 以下浏览器中使用 filter 语法进行了模拟。

`.vertical-gradient()`

设定垂直方向（从上到下）双色线性渐变的背景。

`.vertical-gradient(@start-color, @end-color)`

@start-color 起始颜色。 @end-color 结束颜色。

前往 estFiddle 查看

.box {
    .vertical-gradient(black, white);
}

.box {
    background-image: -webkit-gradient(linear, left top, left bottom, from(black), to(white));
    background-image: -webkit-linear-gradient(top, black, white);
    background-image: -moz-linear-gradient(top, black, white);
    background-image: -o-linear-gradient(top, black, white);
    background-image: linear-gradient(to bottom, black, white);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#ff000000', endColorstr='#ffffffff', GradientType=0);
}

支持采用老 WebKit 语法的浏览器，并在 IE 10 以下浏览器中使用 filter 语法进行了模拟。

`.repeating-linear-gradient()`

-prefix

设定循环线性渐变的背景。

`.repeating-linear-gradient(@direction, @color-stops...)`

@direction 渐变线的方向。 @color-stops 色标，至少有两个参数值。

前往 estFiddle 查看

.box-one {
    .repeating-linear-gradient(to top right, white, black 20px);
}

.box-two {
    .repeating-linear-gradient(273deg, red, yellow 30%, green 70%);
}

.box-one {
    background-image: -webkit-repeating-linear-gradient(bottom left, white, black 20px);
    background-image: -moz-repeating-linear-gradient(bottom left, white, black 20px);
    background-image: -moz-repeating-linear-gradient(to top right, white, black 20px);
    background-image: -o-repeating-linear-gradient(to top right, white, black 20px);
    background-image: repeating-linear-gradient(to top right, white, black 20px);
}

.box-two {
    background-image: -webkit-repeating-linear-gradient(177deg, red, yellow 30%, green 70%);
    background-image: -moz-repeating-linear-gradient(177deg, red, yellow 30%, green 70%);
    background-image: -o-repeating-linear-gradient(177deg, red, yellow 30%, green 70%);
    background-image: repeating-linear-gradient(273deg, red, yellow 30%, green 70%);
}

参数写法及注意事项请参考 .linear-gradient()。

@shape 渐变的形状、范围、位置。写法可参考 radial-gradient() Syntax。书写方式按草案的标准写法书写，格式为 [<shape>] ? [<extent>] ? [at <position>] ?，其中每一部分都为可选。整个 @shape 参数省略不写时，默认输出圆形径向渐变。 @color-stops 色标，至少有两个参数值。写法可参考 Gradient Color-Stops。

前往 estFiddle 查看

.box-one {
    .radial-gradient(black, white);
}

.box-two {
    .radial-gradient(closest-corner at 30% 30%, rgba(0, 0, 0, 0.2), rgba(0, 0, 225, 0.8));
}

.box-three {
    .radial-gradient(ellipse, limegreen, skyblue 30%, crimson 70%);
}

.box-one {
    background-image: -webkit-radial-gradient(black, white);
    background-image: -moz-radial-gradient(black, white);
    background-image: -o-radial-gradient(black, white);
    background-image: radial-gradient(circle, black, white);
}

.box-two {
    background-image: -webkit-radial-gradient(30% 30%, closest-corner, rgba(0, 0, 0, 0.2), rgba(0, 0, 225, 0.8));
    background-image: -moz-radial-gradient(30% 30%, closest-corner, rgba(0, 0, 0, 0.2), rgba(0, 0, 225, 0.8));
    background-image: -o-radial-gradient(30% 30%, closest-corner, rgba(0, 0, 0, 0.2), rgba(0, 0, 225, 0.8));
    background-image: radial-gradient(closest-corner at 30% 30%, rgba(0, 0, 0, 0.2), rgba(0, 0, 225, 0.8));
}

.box-three {
    background-image: -webkit-radial-gradient(ellipse, limegreen, skyblue 30%, crimson 70%);
    background-image: -moz-radial-gradient(ellipse, limegreen, skyblue 30%, crimson 70%);
    background-image: -o-radial-gradient(ellipse, limegreen, skyblue 30%, crimson 70%);
    background-image: radial-gradient(ellipse, limegreen, skyblue 30%, crimson 70%);
}

不支持采用老 WebKit 语法（Introducing CSS Gradients）的浏览器。另外，不支持按具体尺寸（px / % 等）设置渐变范围，只能使用范围关键字即 closest-side / closest-corner / farthest-side / farthest-corner 之一。

`.repeating-radial-gradient()`

-prefix

设定循环线性渐变的背景。

`.repeating-radial-gradient(@shape, @color-stops...)`

@shape 渐变的形状、范围、位置。 @color-stops 色标，至少有两个参数值。

前往 estFiddle 查看

.box-one {
    .repeating-radial-gradient(white, black 20px);
}

.box-two {
    .repeating-radial-gradient(ellipse farthest-side, white, black 20px);
}

.box-one {
    background-image: -webkit-repeating-radial-gradient(white, black, 20px);
    background-image: -moz-repeating-radial-gradient(white, black, 20px);
    background-image: -o-repeating-radial-gradient(white, black, 20px);
    background-image: repeating-radial-gradient(circle, white, black, 20px);
}

.box-two {
    background-image: -webkit-repeating-radial-gradient(ellipse farthest-side, white, black 20px);
    background-image: -moz-repeating-radial-gradient(ellipse farthest-side, white, black 20px);
    background-image: -o-repeating-radial-gradient(ellipse farthest-side, white, black 20px);
    background-image: repeating-radial-gradient(ellipse farthest-side, white, black 20px);
}

参数写法及注意事项请参考 .radial-gradient()。

`.display()`

-prefix

设定元素的显示方式，用来为带前缀的属性值提供兼容性支持。

.display(@display)
@display 元素的显示方式，可用值参见 Visual formatting model。
前往 estFiddle 查看
```
.card {
    .display(flex);
}
```
```
.card {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
```

目前需要使用此功能的 display 值有 flex / inline-flex / box / inline-box 四种，前两种对应的伸缩盒布局规范为 CSS Flexible Box Layout Module Level 1（最新版）及 CSS Flexible Box Layout Module（2012 年初版），后两种对应的是 Flexible Box Layout Module（2009 版）。

`.flex-direction()`

-prefix

设定伸缩盒布局的排列方向。

`.flex-direction(@flex-direction)`

@flex-direction 布局方向，可用值为 row / row-reverse / column / column-reverse。

前往 estFiddle 查看

.container {
    .flex-direction(row-reverse);
}

.container {
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}

`.flex-wrap()`

-prefix

设定伸缩盒子元素在排列时是否可以折行。

`.flex-wrap(@wrap)`

@wrap 折行方式。wrap 表示可以折行，nowrap 表示必须排列在同一行中。

前往 estFiddle 查看

.container {
    .flex-wrap(wrap);
}

.container {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

`.flex-flow()`

-prefix

设定伸缩盒子元素的排列方式，用来快速定义 flex-direction 和 flex-wrap 的值。

`.flex-flow(@flow)`

@flow 排列方式，写法参见 flex-flow - CSS | MDN。

前往 estFiddle 查看

.container {
    .flex-flow(column-reverse nowrap);
}

.container {
    -webkit-flex-flow: column-reverse nowrap;
        -ms-flex-flow: column-reverse nowrap;
            flex-flow: column-reverse nowrap;
}

`.order()`

-prefix

设定伸缩盒项目元素的排列次序。

`.order(@order)`

@order 排列次序。

前往 estFiddle 查看

.card-main {
    .order(1);
}

.card-main {
    -ms-flex-order: 1;
    -webkit-order: 1;
            order: 1;
}

`.flex()`

-prefix

设定伸缩盒项目元素的可伸缩程度，用来快速定义 flex-grow、flex-shrink 和 flex-basis 的值。

.flex(@flex)
@flex 定义伸缩盒项目元素的伸缩因子和初始尺寸。写法请参考 flex - CSS | MDN。
前往 estFiddle 查看
```
.main {
    .flex(2 1 600px);
}
```
```
.main {
    -webkit-flex: 2 1 600px;
        -ms-flex: 2 1 600px;
            flex: 2 1 600px;
}
```

`.flex-grow()`

-prefix

设定伸缩盒项目元素的伸展因子。

`.flex-grow(@flex)`

@flex 伸展因子。

前往 estFiddle 查看

.main {
    .flex-grow(2);
}

.main {
    -webkit-flex-grow: 2;
    -ms-flex-positive: 2;
            flex-grow: 2;
}

`.flex-shrink()`

-prefix

设定伸缩盒项目元素的收缩因子。

`.flex-shrink(@flex)`

@flex 收缩因子。

前往 estFiddle 查看

.main {
    .flex-shrink(1);
}

.main {
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
            flex-shrink: 1;
}

`.flex-basis()`

-prefix

设定伸缩盒项目元素的初始主尺寸。

`.flex-basis(@size)`

@size 初始尺寸。

前往 estFiddle 查看

.main {
    .flex-basis(600px);
}

.main {
    -ms-flex-preferred-size: 600px;
    -webkit-flex-basis: 600px;
            flex-basis: 600px;
}

`.justify-content()`

-prefix

设定在当前伸缩行中，沿主轴方向排列伸缩盒项目元素时如何分配它们之间和两边的多余空间。

`.justify-content(@align)`

@align 多余空间分配方式。

前往 estFiddle 查看

.gallery {
    .justify-content(space-around);
}

.gallery {
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
            justify-content: space-around;
}

justify-content 值含义见下图：

`.align-items()`

-prefix

设定在当前伸缩行中，沿交叉轴（与主轴垂直）方向如何分配多余的空间。

`.align-items(@align)`

@align 多余空间分配方式。

前往 estFiddle 查看

.gallery {
    .align-items(center);
}

.gallery {
    -ms-flex-align: center;
    -webkit-align-items: center;
            align-items: center;
}

align-items 值含义见下图：

`.align-self()`

-prefix

设定在当前伸缩行中，沿交叉轴（与主轴垂直）方向如何分配某个伸缩盒项目两侧的多余空间，可以覆盖伸缩盒容器上设定的 align-items 属性。

`.align-self(@align)`

@align 多余空间分配方式。

前往 estFiddle 查看

.photo {
    .align-self(flex-start);
}

.photo {
    -ms-flex-item-align: start;
    -webkit-align-self: flex-start;
            align-self: flex-start;
}

取值含义参考 .align-items()。

`.align-content()`

-prefix

用来设定伸缩盒容器的各行在交叉轴方向（与主轴垂直）上有多余空间时的对齐方式。

`.align-content(@align)`

@align 多余空间分配方式。

前往 estFiddle 查看

.photo {
    .align-content(flex-start);
}

.photo {
    -ms-flex-line-pack: start;
    -webkit-align-content: flex-start;
            align-content: flex-start;
}

align-content 值含义见下图：

`.box-orient()`

-prefix

用来设定伸缩盒子元素按垂直排列还是水平排列。

`.box-orient(@orient)`

@orient 排列方向。可用值为 horizontal / vertical / inline-axis / block-axis。

前往 estFiddle 查看

.gallery {
    .box-orient(horizontal);
}

.gallery {
    -webkit-box-orient: horizontal;
       -moz-box-orient: horizontal;
}

box-orient 是老版本伸缩盒规范的属性，建议仅在必要时使用。

`.box-direction()`

-prefix

用来设定伸缩盒子元素按正向排列还是逆向排列。

`.box-direction(@direction)`

@direction 排列方向。可用值为 normal / reverse。

前往 estFiddle 查看

.gallery {
    .box-direction(reverse);
}

.gallery {
    -webkit-box-direction: reverse;
       -moz-box-direction: reverse;
}

box-direction 是老版本伸缩盒规范的属性，建议仅在必要时使用。

`.box-ordinal-group()`

-prefix

为伸缩盒子元素分配一个组序号，将影响 box-direction 排列的次序，参见 box-ordinal-group - CSS | MDN。

`.box-ordinal-group(@group)`

@group 分组序号。

前往 estFiddle 查看

.current-item {
    .box-ordinal-group(1);
}

.current-item {
    -webkit-box-ordinal-group: 1;
       -moz-box-ordinal-group: 1;
}

box-ordinal-group 是老版本伸缩盒规范的属性，建议仅在必要时使用。

`.box-flex-group()`

-prefix

为伸缩盒子元素分配一个伸缩组序号，伸缩组将影响多余空间的分配方式，可参考 box-flex-group - CSS | MDN。

`.box-flex-group(@group)`

@group 分组序号。

前往 estFiddle 查看

.main-item {
    .box-flex-group(1);
}

.main-item {
    -webkit-box-flex-group: 1;
       -moz-box-flex-group: 1;
}

box-flex-group 是老版本伸缩盒规范的属性，建议仅在必要时使用。

`.box-flex()`

-prefix

指定伸缩盒子元素在分配多余空间时的伸展因子。

`.box-flex(@flex)`

@flex 伸展因子。

前往 estFiddle 查看

.main-item {
    .box-flex(2);
}

.main-item {
    -webkit-box-flex: 2;
       -moz-box-flex: 2;
}

box-flex 是老版本伸缩盒规范的属性，建议仅在必要时使用。

`.box-align()`

-prefix

指定伸缩盒元素如何在垂直于排列方向的方向上分配多余空间。

.box-align(@align)
@align 分配方式，可用值为 start / center / end / baseline / stretch。
前往 estFiddle 查看
```
.container {
    .box-align(baseline);
}
```
```
.container {
    -webkit-box-align: baseline;
       -moz-box-align: baseline;
}
```
参数值可参考 .align-items()。

box-align 是老版本伸缩盒规范的属性，建议仅在必要时使用。

`.box-pack()`

-prefix

指定伸缩盒元素如何在排列方向上分配多余空间。

.box-pack(@align)
@align 分配方式，可用值为 start / center / end / justify。
前往 estFiddle 查看
```
.container {
    .box-pack(justify);
}
```
```
.container {
    -webkit-box-pack: justify;
       -moz-box-pack: justify;
}
```
参数值可参考 .justify-content()。start / center / end / justify 分别对应 flex-start / center / flex-end / space-between。

box-pack 是老版本伸缩盒规范的属性，建议仅在必要时使用。