less组件库必须先分离变量、mixin与样式文件，所有主题变量和基础mixin须抽离到独立文件并在组件前@import；按钮等组件须用单个参数化mixin正交控制颜色、尺寸、状态，通过链式调用避免重复输出；命名空间必须包裹整个组件块且html根容器加对应类名；构建须用lessc命令行配合--strict-imports和--source-map确保可维护性。
Less组件库必须先分离变量、mixin与样式文件
所有主题变量（如@primary-color、@border-radius-base）和基础.button()这类mixin，必须抽离到独立文件，并在组件样式前@import。否则变量覆盖失效——比如你在themes/dark.less里改了@primary-color，但button.less在它前面被@import，编译后按钮还是用旧值。
常见错误是把变量和样式写在同一文件里，或按“功能”而非“作用域”组织@import顺序。正确结构应为：
@import "variables.less";@import "mixins.less";@import "components/button.less";@import "components/input.less";
用npm explore antd -- ls -R | grep variables快速定位第三方库变量路径，再照此对齐你自己的导入链。
按钮等组件必须用单个参数化mixin控制全部变体
别为每种尺寸/状态写单独class或mixin，比如.btn-large、.btn-danger-hover——这会导致调用10次就输出10份重复的padding、transition规则，CSS体积暴涨。
真正可扩展的做法是定义一个主mixin，用参数正交拆分维度：
- 颜色/背景由
@bg、@border、@text控制，幽灵按钮传@bg: transparent即可 - 尺寸通过
@size: md配合map查表：@button-sizes: { sm: (p: 4px 8px, fs: 12px), md: (p: 8px 16px, fs: 14px) }; - 状态（hover/disabled）用守卫
.btn-state(@state) when (@state = hover)单独封装，不混进主逻辑
调用时链式组合：.btn(); .btn-size(md); .btn-state(hover);，既避免重复输出，又支持任意组合。
命名空间必须包裹整个组件块，且HTML根容器要加对应类名
.ui-kit { .button { ... } }这种写法不是装饰，是生效前提。如果只在按钮元素上加class="ui-kit"，而没把它作为HTML最外层容器的class，编译出的CSS选择器（如.ui-kit .button:hover）根本不会匹配任何节点。
容易踩的坑：
- 用ID做前缀（如
#app .button），导致无法复用到多实例场景 - 内部
&:hover没被命名空间包裹，变成全局.button:hover污染其他样式 - 误以为CSS Modules或Vue scoped能替代它——其实Less命名空间是编译期隔离，两者互补而非互斥
验证方式：打开DevTools，看计算出的样式是否来自.ui-kit .button这一整条路径，而不是孤立的.button。
自动化构建必须用lessc命令行并接入npm script
手动执行lessc main.less main.css不可持续。必须在package.json中声明脚本：
"scripts": {
"build:css": "lessc --strict-imports --source-map main.less main.css"
}
--strict-imports能提前暴露@import路径错误；--source-map让浏览器能精准定位到button.less第23行，而不是编译后CSS的某一行。
注意：不要在构建脚本里拼接rm css && lessc——lessc本身不缓存，重复执行就是全量重编。真正需要的是监听变更，可用lessc --watch或接入webpack-less-loader，但后者会绕过@import顺序校验，调试更难。
最后提醒一句：mixin每次调用都会展开全部CSS规则，哪怕只改一个@padding-x。所以组件库越早收敛参数粒度（比如把@padding-y和@padding-x拆开），后期维护成本越低——这点在按钮这种高频组件上，半年后你就真能感觉到差别。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
