vue+scss 开发常用混合器（自用，持续更新）

@charset "utf-8";

// flex布局，兼容
@mixin myFlex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

// 阴影，兼容
@mixin boxShadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

//圆角，兼容
@mixin roundCorner($size) {
  -webkit-border-radius: $size;
  -moz-border-radius: $size;
  border-radius: $size;
}

// flex居中
@mixin flexCenter($pos) {
  @include myFlex;

  // 水平居中
  @if $pos=='x' {
    justify-content: center;
  }
  // 垂直居中
  @if $pos=='y' {
    align-items: center;
  }
  // 水平、垂直都居中
  @if $pos=='c' {
    justify-content: center;
    align-items: center;
  }
}

// 定位居中，兼容
@mixin posCenter {
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

// 禁止文本被选择
@mixin user-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@mixin not-touch {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

// 文字超出显示省略号
@mixin ellipsis {
  /*加宽度width属来兼容部分浏览*/
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

// 兼容阴影
@mixin myShadow($shadow) {
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  box-shadow: $shadow;
}

// 兼容transform
@mixin myTransform($transform) {
  -webkit-transform: $transform;
  -moz-transform: $transform;
  -ms-transform: $transform;
  -o-transform: $transform;
  transform: $transform;
}

//文字超出几行显示省略号
@mixin ellipsis-multi($line) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

// 隔行换色
@mixin zebra-lists($evenColor, $evenBgColor, $oddColor, $oddBgColor) {
  &:nth-child(2n) {
    color: $evenColor;
    background-color: $evenBgColor;
  }
  &:nth-child(2n + 1) {
    color: $oddColor;
    background-color: $oddBgColor;
  }
}


// 禁止换行或强制换行
@mixin text-wraps($status) {
  // 强制换行
  @if $status=='y' {
    // 只对英文起作用，以字母作为换行依据。
    word-break: break-all;
    // 只对英文起作用，以单词作为换行依据。
    word-wrap: break-word;
    // 只对中文起作用，强制换行。
    white-space: pre-wrap;
  }
  // 禁止换行
  @else {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}