scss混合(mixins)使用公共样式使用

最新推荐文章于 2025-04-29 22:06:50 发布

试图让你心动

最新推荐文章于 2025-04-29 22:06:50 发布

阅读量2.1k

点赞数 1

分类专栏： css 文章标签： scss css css3

本文链接：https://blog.youkuaiyun.com/zhangmeixia969/article/details/123382444

版权

css 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在Sass中创建一个名为`ellipsisBasic`的mixin，用于实现文本n行溢出隐藏的功能。默认设置为显示2行，可以通过传入参数自定义显示行数。在组件中，我们可以方便地导入并使用这个mixin，以控制文本的显示效果，例如在段落中分别展示2行和3行文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>