常用class 总结

Posted 2020-10-29 mayufo

清除浮动

// 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;
}