scss混合”mixins“使用（学者说）

Vue中scss混合(mixins)使用

前言:使用混合mixins中的变量来定义一个n行文本溢出隐藏的公共样式

第一步（创建mixins.scss文件）

• 建议可以将其创建在src目录下的assets（项目中的静态文件目录）下，创建css公共样式目录里创建文件mixin.scss

    //$clamp 是变量，可以自定义最多显示几行文本
     @mixin ellipsisBasic($clamp:1) {
    
      
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: $clamp;
      }
  

第二步 （在组件中使用）

<p>这是一串很长的文字，看完以上素材教程你就可以随意控制n行文本溢出隐藏的样式，后面还有9999999999个文字</p>

<style rel="stylesheet/scss" lang="scss" scoped>

@import "@/assets/css/mixin.scss"

p{
    
    
    @include ellipsisBasic;
}
</style>