一些有趣的片段

clearfix

.clearfix() {
  &:after,
  &:before {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

vertical-center

@mixin utils-vertical-center {
  $selector: &;
  @at-root {
    #{$selector}::after {
      display: inline-block;
      content: "";
      height: 100%;
      vertical-align: middle
    }
  }
}

ellipsis

.ellipsis(@num: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: @num;
  -webkit-box-orient: vertical;
}

user-select

// sass
@mixin utils-user-select($value) {
  -moz-user-select: $value;
  -webkit-user-select: $value;
  -ms-user-select: $value;
}
// less
.user-select(@value: none) {
    -moz-user-select: @value;
    -webkit-user-select: @value;
    -ms-user-select: @value;
}

arrow

// 来自weui
._setArrow(@arrowsize, @borderColor, @borderWidth){
    display: inline-block;
    height: @arrowsize;
    width: @arrowsize;
    border-width: @borderWidth @borderWidth 0 0;
    border-color: @borderColor;
    border-style: solid;
}
// rotate(-45deg)
.setArrow(@direction, @arrowsize, @borderColor, @borderWidth) when (@direction = top) {
    ._setArrow(@arrowsize, @borderColor, @borderWidth);
    transform: matrix(0.71,-0.71,0.71,0.71,0,0); 
}
// rotate(45deg);
.setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = right) {
    ._setArrow(@arrowsize, @borderColor, @borderWidth);
    transform: matrix(0.71,0.71,-0.71,0.71,0,0); 
    position: relative;
    top: -2px;
}
// rotate(135deg);
.setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = down) {
    ._setArrow(@arrowsize, @borderColor, @borderWidth);
    transform: matrix(-0.71,0.71,-0.71,-0.71,0,0); 
    position: relative;
    top: -3px;
}
// rotate(-135deg);
.setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = left) {
    ._setArrow(@arrowsize, @borderColor, @borderWidth);
    transform: matrix(-0.71,-0.71,0.71,-0.71,0,0); 
    position: relative;
    top: -2px;
}