經常使用class 總結

清除浮動

// Clearfix
@mixin clearfix {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

滾動條樣式(隱藏)

@mixin scrollHide {
  &::-webkit-scrollbar {
    display: none;
  }
}

強制不換行超出文字省略號

@mixin ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行狀況下第line行超出文字省略號

@mixin multiEllipsis($line) {
  display: -webkit-box;
  -webkit-box-orient: vertical; // 從上向下垂直排列子元素。設置或檢索伸縮盒對象的子元素的排列方式 。
  text-overflow: ellipsis; //文本溢出 用省略號顯示
  -webkit-line-clamp: $line; // 多少行省略
  overflow: hidden;
  word-break: break-all;
}

$px爲須要轉換的rem

// px 轉 rem 的默認
$browser-default-font-size: 16px;

@function pxTorem($px){
  @return $px / $browser-default-font-size * 1rem;
}