Question

提供基础的兼容性封装。

依赖于：

• variables

• .inline-block()

  让元素表现为 display: inline-block 的状态，IE 6/7 下通过 zoom: 1 模拟。

• .box-sizing()

  -prefix

  设定盒模型的计算方式。

  • .box-sizing(@sizing)

    @sizing

    模型计算方式，可以为 border-box / padding-box / content-box。

    .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。

    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。

    .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（可以带 %）。

    .overlay {
    .opacity(70%);
    }

    .overlay {
    opacity: 0.7;
    filter: alpha(opacity=70);
    }
    

• .rgba-background()

  设定半透明背景色。

  • .rgba-background(@rgba)

    @rgba

    RGBA 格式色值。

    .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（可以带 %）。

    .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。

    .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 个空格分隔的半径值同时指定多个角的圆角半径。

    .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。

    .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

    垂直方向的圆角半径。

    .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。

    .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

    单个过渡设定。

    .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;
    }
    

  过渡属性值写法请参考：
  • CSS Transitions
  • transition - CSS|MDN

• .transition-property()

  -prefix

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

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

    @property

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

    .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

    单个过渡的持续时间。

    .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

    单个过渡的时间函数。

    .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

    单个过渡的延迟时间。

    .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

    单个动画设定。

    .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;
    }
    

  动画属性值写法请参考：
  • CSS Animations
  • animation - CSS|MDN

• .animation-name()

  -prefix

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

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

    @name

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

    .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

    单个动画的持续时间。

    .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

    单个动画的时间函数。

    .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

    单个动画的循环次数。

    .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

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

    .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

    单个动画的播放状态。

    .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

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

    .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

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

    .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

    变换函数。

    .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);
    }
    

  变换函数写法请参考：
  • CSS Transforms
  • transform - CSS|MDN

• .transform-style()

  -prefix

  设定变换是否支持 3D。

  • .transform-style(@style)

    @style

    对 3D 变换的支持方式。

    .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

    坐标原点位置。

    .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

    背面是否可见。

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

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

• .perspective()

  -prefix

  设定透视距离。

  • .perspective(@d)

    @d

    透视距离。

    .box {
    .perspective(1500px);
    }

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

• .matrix()

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

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

    .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)

    @tx

    X 轴方向上的平移距离。

    .box {
    .translate(80px);
    }

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

    Y 轴方向不进行平移。等价于 .translateX(@tx)。

  • .translate(@tx, @ty)

    @tx

    X 轴方向上的平移距离。

    @ty

    Y 轴方向上的平移距离。

    .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

    平移距离。

    .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)。

• .translateY()

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

  • .translateY(@ty)

    @ty

    平移距离。

    .box {
    .translateY(80px);
    }

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

    等价于 .translate(0, @ty)。

• .scale()

  进行 2D 缩放变换。

  • .scale(@s)

    @s

    缩放比例。

    .box {
    .scale(2.1);
    }

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

    等价于 .scale(@s, @s)。

  • .scale(@sx, @sy)

    @sx

    X 轴方向上的缩放比例。

    @sy

    Y 轴方向上的缩放比例。

    .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);
    }
    

• .scaleX()

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

  • .scaleX(@sx)

    @sx

    缩放比例。

    .box {
    .scaleX(0.5);
    }

    .box {
    -webkit-transform: scaleX(0.5);
    -moz-transform: scaleX(0.5);
    -ms-transform: scaleX(0.5);
    -o-transform: scaleX(0.5);
    transform: scaleX(0.5);
    }
    

    等价于 .scale(@sx, 1)。

• .scaleY()

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

  • .scaleY(@sy)

    @sy

    缩放比例。

    .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

    旋转角度。

    .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)

    @ax

    沿 X 轴倾斜拉伸的角度。

    .box {
    .skew(30deg);
    }

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

    沿 Y 轴方向不进行倾斜拉伸。等价于 .skewX(@ax)。

  • .skew(@ax, @ay)

    @ax

    沿 X 轴倾斜拉伸的角度。

    @ay

    沿 Y 轴倾斜拉伸的角度。

    .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 并不等价。

• .skewX()

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

  • .skewX(@ax)

    @ax

    倾斜拉伸的角度。

    .box {
    .skewX(30deg);
    }

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

    等价于 .skew(@ax)。

• .skewY()

  沿 Y 轴倾斜拉伸的角度。

  • .skewY(@ay)

    @ay

    倾斜拉伸的角度。

    .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)

    .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 轴方向上的平移距离。

    .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);
    }
    

• .translateZ()

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

  • .translateZ(@tz)

    @tz

    平移距离。

    .box {
    .translateZ(3em);
    }

    .box {
    -webkit-transform: translateZ(3em);
    -moz-transform: translateZ(3em);
    -ms-transform: translateZ(3em);
    -o-transform: translateZ(3em);
    transform: translateZ(3em);
    }
    

  等价于 .translate3d(0, 0, @tz)。

• .scale3d()

  进行 3D 缩放变换。

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

    @sx

    X 轴方向上的缩放比例。

    @sy

    Y 轴方向上的缩放比例。

    @sz

    Z 轴方向上的缩放比例。

    .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);
    }
    

• .scaleZ()

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

  • .scaleZ(@sz)

    @sz

    缩放比例。

    .box {
    .scaleZ(0.3);
    }

    .box {
    -webkit-transform: scaleZ(0.3);
    -moz-transform: scaleZ(0.3);
    -ms-transform: scaleZ(0.3);
    -o-transform: scaleZ(0.3);
    transform: scaleZ(0.3);
    }
    

  等价于 .scale3d(1, 1, @sz)。

• .rotate3d()

  进行 3D 旋转变换。

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

    @x

    旋转轴方向向量在 X 轴方向上的分量。

    @y

    旋转轴方向向量在 Y 轴方向上的分量。

    @z

    旋转轴方向向量在 Z 轴方向上的分量。

    @angle

    旋转角度。

    .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);
    }
    

• .rotateX()

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

  • .rotateX(@angle)

    @angle

    旋转角度。

    .box {
    .rotateX(60deg);
    }

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

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

• .rotateY()

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

  • .rotateY(@angle)

    @angle

    旋转角度。

    .box {
    .rotateY(60deg);
    }

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

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

• .rotateZ()

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

  • .rotateZ(@angle)

    @angle

    旋转角度。

    .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

    单个背景的渲染范围。

    .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

    .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

    .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。

    .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

    结束颜色。

    .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

    结束颜色。

    .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

    色标，至少有两个参数值。

    .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()。

• .radial-gradient()

  -prefix

  设定径向渐变的背景。

  • .radial-gradient(@shape, @color-stops...)

    @shape

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

    @color-stops

    色标，至少有两个参数值。写法可参考 Gradient Color-Stops。

    .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

    色标，至少有两个参数值。

    .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。

    .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。

    .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 表示必须排列在同一行中。

    .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。

    .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

    排列次序。

    .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。

    .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

    伸展因子。

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

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

• .flex-shrink()

  -prefix

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

  • .flex-shrink(@flex)

    @flex

    收缩因子。

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

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

• .flex-basis()

  -prefix

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

  • .flex-basis(@size)

    @size

    初始尺寸。

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

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

• .justify-content()

  -prefix

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

  • .justify-content(@align)

    @align

    多余空间分配方式。

    .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

    多余空间分配方式。

    .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

    多余空间分配方式。

    .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

    多余空间分配方式。

    .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。

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

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

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

• .box-direction()

  -prefix

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

  • .box-direction(@direction)

    @direction

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

    .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

    分组序号。

    .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

    分组序号。

    .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

    伸展因子。

    .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。

    .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。

    .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 是老版本伸缩盒规范的属性，建议仅在必要时使用。