常用工具类css

scss：

遍历生成margin/padding

@for $i from 1 through 200 {
  .m-#{$i} { margin: ($i/100)+rem; }
  .m-t-#{$i} { margin-top: ($i/100)+rem; }
  .m-b-#{$i} { margin-bottom: ($i/100)+rem; }
  .m-l-#{$i} { margin-left: ($i/100)+rem; }
  .m-r-#{$i} { margin-right: ($i/100)+rem; }
 
  .p-#{$i} { padding: ($i/100)+rem; }
  .p-t-#{$i} { padding-top: ($i/100)+rem; }
  .p-b-#{$i} { padding-bottom: ($i/100)+rem; }
  .p-l-#{$i} { padding-left: ($i/100)+rem; }
  .p-r-#{$i} { padding-right: ($i/100)+rem; }
 
  .fz-#{$i} { font-size: ($i/100)+rem; }
}
//调用：
<div class="m-t-100 fz-30"></div>

@mixin部分

多行文本溢出

@mixin multiEllipsis($line:2){
    overflow : hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
}
//调用：
.text{
    @include multiEllipsis(3)  // 表示只显示三行,多出来的显示省略号
}

普通CSS部分

//单行文本溢出
.ellipsis{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
//清除浮动
.clearfix{
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}