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;
height: (height; } @mixin square()size) {
@include wh($size, (size); } @mixin size()width, $height) {
$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- 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);
}
}
}