@TechUI/LessMixins 简介

🔓已开源

TechUI LessMixins (样式混入库) 是 TechUI 生态系统的CSS 加速器。

如果说 @techui/colors 提供了颜色的语义，那么 @techui/lessmixins 则提供了样式的语法糖。它是一套由 aYin 长期维护的高效 Less 代码片段集合，旨在通过极简的缩写语法，将冗长的 CSS 编写过程缩短 50% 以上。

一句话总结：用更少的代码，写出更规范的样式。

核心特性

• 🚀 极简 API：拒绝冗长的属性名，使用直觉式的缩写（如 .bd 代表 border, .bgc 代表 background-color）。
• 🎨 深度集成色彩系统：与 @techui/colors 无缝连接，直接消费颜色变量。
• ⚡️ 全局注入：配置一次，即可在项目任何 .less 文件或 Vue 组件的 <style lang="less"> 中直接使用，无需反复 import。
• 🛠 通用布局封装：内置绝对居中、文本截断等高频 CSS 场景的解决方案。

全局配置 一次性设置

为了获得最佳体验，我们强烈建议将其配置为全局可用。这样您就不需要在每个组件中手动 @import。

Vite 项目 (推荐)

在 vite.config.js 中配置 preprocessorOptions，实现自动注入：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        // 自动将 mixins 和 colors 注入到每一个 less 文件头部
        additionalData: `@import "${path.resolve(__dirname, './node_modules/@techui/lessmixins/index.less')}";`
      }
    }
  }
});

Vue CLI / Webpack 项目

在 vue.config.js 中使用 style-resources-loader：

const path = require('path');

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './node_modules/@techui/lessmixins/index.less')
      ]
    }
  }
};

编码对比 效率飞跃

使用 @techui/lessmixins 后，您的样式代码将变得极其简洁。

场景一：设置边框与背景

传统写法 (Native CSS/Less):

.box {
  border: 1px solid #ffffff;  /* 需要手动记忆颜色值 */
  background-color: #000000;
}

TechUI 写法 (With Mixins):

.box {
  .bd(@wh);   /* .bd = 1px solid, @wh = white */
  .bgc(@bk);  /* .bgc = background-color, @bk = black */
}

**

场景二：绝对居中

传统写法:

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

TechUI 写法:

.modal {
  .centerAbsolute; /* 一行代码搞定 */
}

**

常用 Mixin 速查

虽然库中包含大量工具，但以下几个是开发中使用频率最高的“黄金指令”：

Mixin	含义	对应 CSS 示例
.bd(@color)	1px 实线边框	border: 1px solid @color
.bgc(@color)	背景颜色	background-color: @color
.wh(@w, @h)	宽高设置	width: @w; height: @h
.centerAbsolute	绝对定位居中	top: 50%; left: 50%; transform...
.ellipsis	单行文本省略	overflow: hidden; text-overflow: ellipsis...

依赖关系

本库通常不单独使用，而是与以下库协同工作：

• @techui/colors: 为 Mixin 提供语义化的颜色变量支持（如 @re 红色, @bl 蓝色）。
• Less: 必须安装 Less 编译器与加载器。