compatibility

提供基础的兼容性封装。

• 如果基础变量$support-old-ie 为true时，给低版本ie添加hack。
• 根据各浏览器的支持情况添加浏览器前缀(http://caniuse.com/)

##$inline-block() 让元素表现为 display: inline-block 的状态，IE 6/7 下通过 zoom: 1 模拟(基础变量 $support-old-ie 为true才生成ie6/7兼容)。

span{
  $inline-block();
}
/*编译后*/
span{
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

##$box-sizing() 设定盒模型的计算方式，例如：border-box / padding-box / content-box。

div{
  $box-sizing(border-box);
}
/*编译后*/
div{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

##$placeholder() 设定文本输入框占位符的颜色，不支持IE 9及以下。如果未传参进去，color的默认值为基础变量 $default-input-placeholder-color。

div{
  $placeholder(#999)
}
/*编译后*/
div:-moz-placeholder {
  color: #999;
}
div::-moz-placeholder {
  color: #999;
}
div::-webkit-input-placeholder {
  color: #999;
}
div:-ms-input-placeholder {
  color: #999;
}

##$user-select() 设定处理选区的方式。user-select 目前没有出现在任何 W3C 官方的规范中，浏览器厂商的实现可能会有细节上的差异，目前不建议使用除 text 和 none 以外的任何值。

div{
  $user-select(none);
}
/*编译后*/
div{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

##$opacity() 设置元素透明度。取值范围 0 - 100 (默认值为100)

div{
  $opacity(30);
}
/*编译后*/
div {
  opacity: 0.3;
  filter: alpha(opacity=30);
}

##$border-radius() 设置圆角。默认值为基础变量 $default-border-radius。

还提供了$border-top-left-radius() \ $border-top-right-radius() \ $border-bottom-right-radius() \ $border-bottom-left-radius() \ $border-top-radius() \ $border-right-radius() \ $border-bottom-radius() \ $border-left-radius() ，与之同理。

div{
  $border-radius(30px 0)
}
/*编译后*/
div {
  -webkit-border-radius: 30px 0;
  -moz-border-radius: 30px 0;
  border-radius: 30px 0;
}

##$box-shadow() 设置元素阴影。默认值为基础变量 $default-box-shadow。

div{
  $box-shadow(1px 1px 1px rgba(0,0,0,.5));
}
/*编译后*/
div {
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

##$browser-prefix() 浏览器前缀万金油。传入两个参数，一个属性名、一个属性值，添加各种浏览器前缀。（偷懒做法，不建议使用）

div{
  $browser-prefix(transform, rotate(45deg));
}
/*编译后*/
div {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

##$transform() 变换（transform）操作。

div{
  $transform(rotate(45deg))
}
/*编译后*/
div {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

##$transform-style() 设定变换是否支持 3D。IE不支持，Opera 15起以-webkit前缀方式支持

div{
  $transform-style(preserve-3d);
}
/*编译后*/
div {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

##$transform-origin() 设置动画原点。Opera 15起以-webkit前缀方式支持三值语法，之前以-o前缀方式支持

div{
  $transform-origin(25% 75%)
}
/*编译后*/
div {
  -webkit-transform-origin: 25% 75%;
  -moz-transform-origin: 25% 75%;
  -ms-transform-origin: 25% 75%;
  -o-transform-origin: 25% 75%;
  transform-origin: 25% 75%;
}

##$backface-visibility() 设定3D变换后元素背面是否可见。IE9、Opera 14及以下不支持，Opera 15起以-webkit前缀方式支持

div{
  $backface-visibility(hidden);
}
/*编译后*/
div {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

##$perspective() 设定3D变换后元素背面是否可见。IE9、Opera 14及以下不支持，Opera 15起以-webkit前缀方式支持

div{
  $perspective(1500px);
}
/*编译后*/
div {
  -webkit-perspective: 1500px;
  -moz-perspective: 1500px;
  perspective: 1500px;
}

##$display() 设置盒子模型。支持：flex / inline-flex / box / inline-box。

div{
  $display(flex);
}
/*编译后*/
div {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

##$flex-direction() 设定伸缩盒布局的排列方向。

div{
  $flex-direction(row-reverse);
}
/*编译后*/
div {
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

##$order() 设定伸缩盒项目元素的排列次序。

div{
  $order(1);
}
/*编译后*/
div {
  -webkit-flex-order: 1;
  -moz-flex-order: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  -moz-order: 1;
  -ms-order: 1;
  order: 1;
}

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

div{
  $flex(2 1 600px);
}
/*编译后*/
div {
  -webkit-flex: 2 1 600px;
  -moz-flex: 2 1 600px;
  -ms-flex: 2 1 600px;
  flex: 2 1 600px;
}

##$flex-grow() 设定伸缩盒项目元素的伸展因子。

div{
  $flex-grow(2);
}
/*编译后*/
div {
  -webkit-flex-grow: 2;
  -moz-flex-grow: 2;
  flex-grow: 2;
}

##$flex-shrink() 设定伸缩盒项目元素的收缩因子。

div{
  $flex-shrink(1);
}
/*编译后*/
div {
  -webkit-flex-shrink: 1;
  -moz-flex-shrink: 1;
  flex-shrink: 1;
}

##$flex-basis() 设定伸缩盒项目元素的初始主尺寸。

div{
  $flex-basis(600px);
}
/*编译后*/
div {
  -webkit-flex-basis: 600px;
  -moz-flex-basis: 600px;
  flex-basis: 600px;
}