通用sass样式汇总

// 当超过宽度时，显示省略号
@mixin ell() {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
// 利用绝对定位后margin自适应实现水平垂直居中，兼容IE6+
@mixin caa($direction: both) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  @if $direction == both {
    margin: auto;
  } @else if $direction == h {
    margin-left: auto;
    margin-right: auto;
  } @else if $direction == v {
    margin-top: auto;
    margin-bottom: auto;
  }
}
// 只适用行内或行内块级元素水平垂直居中
@mixin ctv() {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

// 尺寸确定，绝对定位后margin偏移实现水平垂直居中，兼容IE6+，不好用
@mixin ca($x, $y) {
  position: absolute;
  left: 50%;
  top: 50%;
  width: $x;
  height: $y;
  margin-left: -$x/2;
  margin-top: -$y/2;
}

// 利用translate实现未知宽高的水平垂直居中，兼容性不好
@mixin ct($direction: both) {
  position: absolute;
  @if $direction == both {
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
  } @else if $direction == h {
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  } @else if $direction == v {
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
}

// flex实现水平垂直居中
@mixin cf($direction: both) {
  display: flex; /*谷歌，火狐等新版本*/
  display: -webkit-box; /*安卓低版本*/
  display: -moz-box; /*火狐低版本*/
  display: -ms-flexbox; /*IE版本*/
  display: -webkit-flex; /*谷歌*/
  @if $direction == both {
    justify-content: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
  } @else if $direction == h {
    justify-content: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
  } @else if $direction == v {
    align-items: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
  }
}