scss 常用的函数总结。

/***
 * px2rem 转换
 */
$base-font-size: 750;
@function px2rem($px) {
  @return $px / 75px * 1rem;
}
@function rem($px) {
  @return ($px / $base-font-size) * 10rem;
}
@function vw($px) {
  @return ($px / $base-font-size) * 100vw;
}
/* 
 * methods
 */
// 定位上下左右居中
@mixin pcenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 定位上下居中
@mixin ptcenter {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

// 定位左右居中
@mixin plcenter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

// 字体大小，颜色
@mixin fsc($size, $color) {
  font-size: px2rem($size);
  color: $color;
}

// flex 布局和子元素对齐方式
@mixin flex($type: space-between) {
  display: flex;
  justify-content: $type;
}
@mixin wh($width, $height) {
  width: $width;
  height: $height;
}
@mixin square($size) {
  @include wh($size, $size);
}
@mixin size($width, $height) {
  width: $width;
  height: $height;
}
@mixin text_overflow($lines: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: $lines;
  -moz-line-clamp: $lines;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  @if $lines == 1 {
    white-space: nowrap;
    display: block;
  } @else {
    display: -webkit-box;
  }
}
@mixin overflow-line($lines) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
   /*! autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  -moz-line-clamp: $lines;
}
@mixin text-overflow($lines: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: $lines;
  -moz-line-clamp: $lines;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  @if $lines == 1 {
    white-space: nowrap;
    display: block;
  } @else {
    display: -webkit-box;
  }
}
@mixin overflow_auto {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

@mixin box-sizing($sizing: border-box) {
  -webkit-box-sizing: $sizing;
  -moz-box-sizing: $sizing;
  box-sizing: $sizing;
}
@mixin sc($size, $color) {
  font-size: $size;
  color: $color;
}
@mixin clearfix {
  &:before,
  &:after {
    content: ' ';
    display: table;
  }
  &:after {
    clear: both;
  }
}
@mixin iphoneX-footer() {
  [data-dpr='2'] & {
    @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
      //iphoneXR
      padding-bottom: calc(env(safe-area-inset-bottom) * 2);
    }
  }

  [data-dpr='3'] & {
    @media only screen and (-webkit-device-pixel-ratio: 3) {
      //iphone X Xs XsMax
      padding-bottom: calc(env(safe-area-inset-bottom) * 3);
    }
  }
}