SCSS/SASS 中如何使用mixin

因为项目中需要使用多行文本超出最末行显示省略号，所以想使用mixin传参
 

定义一个混入mixin：
混入(mixin)通过 @mixin 指令来定义。 @mixin name { property: value; property: value; ... }

/* 普通定义 */
@mixin .ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}

/* 可以接收参数定义 */
@mixin ellipsis-lines($lines) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  word-break: break-all;
}

使用混入：

@include 指令可用于混入的调用：

/* 普通用法 */
div {
  @include ellipsis;
  background-color: green;
}

/* 向可以接收参数的混入传入参数*/
div {
  @include ellipsis-lines(2);
  background-color: green;
}

混入也可以定义默认值：

@mixin ellipsis-lines($lines: 2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  word-break: break-all;
}