SCSS 常用混合

$padding: 15px;
$borderRadius: 10px;

@mixin flex($justifyContent: flex-start, $alignContent: center) {
  display: flex;
  align-items: $alignContent;
  justify-content: $justifyContent;
}

@mixin fontLineColor($fontSize: 14px, $lineHeight: 16px, $color: #333) {
  color: $color;
  font-size: $fontSize;
  line-height: $lineHeight;
  white-space: nowrap;
}

@mixin widthHeight($width: 100%, $height: 100%) {
  width: $width;
  height: $height;
}

@mixin textOverflowHidden($maxWidth) {
  max-width: $maxWidth;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}

@mixin multipleLineTextOverflow($lineNum: 2) {
  -webkit-line-clamp: $lineNum;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}

@mixin icon($width: 100%, $height: 100%) {
  @include widthHeight($width, $height);

  &-img,
  img {
    @include widthHeight();
    vertical-align: top;
  }
}

@mixin triangle($direction, $bgc, $border) {
  position: relative;

  &::before {
    position: absolute;
    border: $border solid transparent;
    content: '';
    border-#{$direction}-color: $bgc;
  }
}

移动端 rem 函数

$HTML_Font_Size: 20;

@function px($n) {
    @return ($n / $HTML_Font_Size: 20) * 1rem;
}