工作中Sass常用混合器总结

背景图片

@mixin background($url, $size: cover) {
  background-image: url($url);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: $size;
}

字体

@mixin font($size, $color, $align: left, $bold: normal) {
  font-size: $size;
  color: $color;
  text-align: $align;
  font-weight: $bold;
}

flex布局

@mixin flex($align:center, $justify:center, $direction:row) {
  display: flex;
  align-items: $align;
  justify-content: $justify;
  flex-direction: $direction;
}

文字单行省略

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

文字多行省略

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