vue+scss混合(mixins)使用(css代码的vuex(公共管理))

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>