less之mixins:一次编写到处运行+减少冗余代码

less有许多实用的内置方法，使用起来也十分方便，mixins也是其中之一。

在某些写入十分麻烦，并且重复量很大的工作面前，最好使用mixins来代替手写。比如：阴影、文本单行省略、多行省略、滚动条自定义等等。

以下是滚动条自定义的mixins实现(可以直接粘贴复制使用，不像要传参删掉即可)：

声明：

/*括号内是接受参数，如果不需要动态指定，可以不添加变量，直接使用固定值*/
.scroll-bar-style(@thumbColor:var(--ms-scroll-thumb-color);@trackColor:var(--ms-scroll-track-color);@thumbShadow:inset 0 0 5px #9b9ba3;@trackShadow:inset 0 0 5px #00000033;) {
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: @thumbShadow;
    background: @thumbColor;
  }
  &::-webkit-scrollbar-track {
    /* 滚动条里面轨道 */
    box-shadow: @trackShadow;
    border-radius: 10px;
    background: @trackColor;
  }
}

调用：

/*传参*/
.scroll-bar-style(rgba(255, 255, 255, 0.16),rgba(255, 255, 255, 0),none,none);
/*不传参，使用默认参数*/
.scroll-bar-style();

注意：

添加括号是接收传参的变量形式，并非mixins的固定写法。你完全可以把任意css作为mixins使用，如：

.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin();
  .my-other-mixin();
}

        如果只是单less文件中使用mixins，便捷程度只能算一般。但是如果搭配全局less，便捷程度直接拉满——你将可以在任意页面、任意组件、任意角落随意使用定义过的任意mixins！

        全局less最简单的方式是定义好less文件后引入到main.ts(react是main.tsx)中,如果想使用规范点的方法，可以看我另一篇文章vite配置全局less/scss/sass_vite5 less-CSDN博客。