整理一份公用common.scss文件

在项目的mixin.scss中设置一些常用的样式以便于复用

参考链接
纯 CSS 实现多行文字截断

<!-- 设置宽高 -->
@mixin wh ($width,$height) {
  width: $width;
  height: $height;
}

<!-- 二倍图和三倍图的处理 -->
@mixin bg-img($url) {
  background-image: url($url+"@2x.png");
  background-size: contain;
  background-repeat: no-repeat;
  @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
    background-image: url($url+"@3x.png");
    background-size: contain;
    background-repeat: no-repeat;
  }
}

<!-- 一个全屏的设置 -->
@mixin fullScreen($bgc: #fff,$index: 100) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $bgc;
  z-index: $index;
}

/**
 * 多行截断
 * num: 行数
 * lh: line-height
 * bg: 背景色
 */
@mixin clamp ($num, $lh, $w: 20px, $bg: #fff) {
  height: $num * $lh;
  line-height: $lh;
  overflow: hidden;
  background: $bg;
  p {
    /*
      宽度100% 并右浮动
      通过margin定位回before的宽度占用的
    */
    float: right;
    margin-left: -$w;
    width: 100%;
    word-break: break-all;
  }
  &::before {
    // 高度必须和文本区域一致,这样p超出后原位置才会换行到before这里
    // 宽度必须大于等于after的宽度,不然浮动无法换行
    float: left;
    width: $w;
    content: '';
    height: $num * $lh;
  }
  &::after {
    float: right;
    content: "...";
    height: $lh;
    line-height:$lh;
    /* 为三个省略号的宽度 */
    width: $w;
    /* 移动省略号位置 */
    position: relative;
    left: 100%;
    transform: translate3d(-100%, -100%, 0);
    text-align: right;
    /* 为了展示效果更好 */
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to($bg), color-stop(50%, $bg));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), $bg 50%, $bg);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), $bg 50%, $bg);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), $bg 50%, $bg);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), $bg 50%, $bg);
  }
}
<!-- 单行截断 -->
%ell {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<!-- 水平居中 -->
%center-h {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -ms-transform:translateX(-50%);     /* IE 9 */
  -moz-transform:translateX(-50%);    /* Firefox */
  -webkit-transform:translateX(-50%); /* Safari 和 Chrome */
  -o-transform:translateX(-50%);
}
<!-- 垂直居中 -->
%center-v {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform:translateY(-50%);     /* IE 9 */
    -moz-transform:translateY(-50%);    /* Firefox */
    -webkit-transform:translateY(-50%); /* Safari 和 Chrome */
    -o-transform:translateY(-50%);
}
<!-- 垂直水平居中 -->
%center{
    position: absolute;
    top: 50%;
    left: 50%
    transform: translate3d(-50%,-50%);
    -ms-transform: translate3d(-50%,-50%);     /* IE 9 */
    -moz-transform: translate3d(-50%,-50%);   /* Firefox */
    -webkit-transform: translate3d(-50%,-50%); /* Safari 和 Chrome */
    -o-transform: translate3d(-50%,-50%);
}
<!-- 子元素垂直水平居中 -->
%center-child {
    display: flex;
    align-item: center;
    justify-content: center;
}