scss混合(mixins)使用

例一、使用混合mixins中的变量来定义一个n行文本溢出隐藏的公用样式。

1、创建mixins.scss文件

//文本n行溢出隐藏
@mixin ellipsisBasic($clamp:2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $clamp;
}

以上代码中，$clamp是变量，决定最多显示几行文本，默认是显示2行，调用的时候可自行传参设置。

2、在组件中使用：

<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/assets/css/mixin.scss';//引用此混合样式
 p {
        line-height: 0.42rem;
        @include ellipsisBasic;//使用此混合样式，默认显示2行
      }
 p {
      width: 100%;
      line-height: 0.42rem;
      @include ellipsisBasic(3);//使用此混合样式，默认显示3行
      font-size: 0.28rem;
      margin-top: 0.37rem;
    }   
</style>

本文地址：https://blog.csdn.net/weixin_43638968/article/details/111872962