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

最新推荐文章于 2024-09-22 21:44:08 发布

原创最新推荐文章于 2024-09-22 21:44:08 发布 · 638 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

scss

1 篇文章

订阅专栏

本文介绍了在Vue项目中如何使用Scss的混合功能（mixins），通过创建mixins.scss文件并定义公共样式，然后在组件中导入并应用这些样式，实现n行文本溢出隐藏等效果。

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>