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>