// 清除浮动
.clearfix() {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// 设置宽高
.size(@width; @height) {
  width: @width;
  height: @height;
}

// 设置透明度
.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

// Retina images
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// 居中设置
.center(@direction: both) when (@direction = both) {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.center(@direction: both) when (@direction = horizontal) {
  position: absolute;
  left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}
.center(@direction: both) when (@direction = vertical) {
  position: absolute;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.border-top(@color: @lineColorDefault){
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: @color;
  transform-origin: 0 0;
  transform: scaleY(0.5);
}
.border-right(@color: @lineColorDefault){
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 1px;
  background-color: @color;
  transform-origin: 100% 0;
  transform: scaleX(0.5);
}
.border-bottom(@color: @lineColorDefault, @height: 1px){
  content: '';
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: @height;
  background-color: @color;
  transform-origin: 0 100%;
  transform: scaleY(0.5);
}
.border-left(@color: @lineColorDefault){
  content: '';
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  width: 1px;
  background-color: @color;
  transform-origin: 0 0;
  transform: scaleX(0.5);
}