因为项目中需要使用多行文本超出最末行显示省略号,所以想使用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;
}