自定义mixin.less并全局注入至项目中

最新推荐文章于 2024-08-25 15:49:46 发布

w候人兮猗

最新推荐文章于 2024-08-25 15:49:46 发布

阅读量809

点赞数

分类专栏： vue 前端文章标签： less mixin.less

本文链接：https://blog.csdn.net/qq_33551792/article/details/103414773

版权

本文介绍了如何创建自定义的mixin.less文件，并全局应用到项目中，以简化通用样式的编写。通过预编译及配置文件设置，实现一次编写，多处复用，提高开发效率。

摘要由CSDN通过智能技术生成

前言

有的时候写项目，需要一些通用的css样式来实现一些功能，比如居中、渐变、单行溢出省略号、多行溢出省略号等.
项目使用的less预处理器，所以整理了一些常见的mixin函数

实现

新建mixin.less文件,整理了一些笔者常用的几个，其他的可以自行添加

具体less如何使用可以看https://www.w3cschool.cn/less/less_installation.html

.ellipsis() {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//多行超出省略号
.ellipsisLine(@line : 2) {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @line;
  overflow: hidden;
}

/*渐变(从上到下）*/
.linear-gradient(@direction:bottom, @color1:transparent, @color2:#306eff, @color3:transparent) {
  //background: -webkit-linear-gradient($direction,$colorTop, $colorCenter, $colorBottom); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(@direction, @color1, @color2, @color3);
  /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(@direction, @color1, @color2, @color3);
  /* Firefox 3.6 - 15 */
  background: linear-gradient(to @direction, @color1, @color2, @color3);
}

// 居中
.center(@width:null,@height:null) {
  position: absolute;
  top: 50%;
  left: 50%;
  & when (@width = null) and (@height= null){
    transform: translate(-50%, -50%);
  }
  & when not(@width = null) and not(@height = null){
    width: @width;
    height: @height;
    margin: -(@height / 2) 0 0 -(@width / 2);
  }
  & when not (@width = null) and (@height = null){
    width: @width;
    margin-left: -(@width / 2);
    transform: translateY(-50%);