直接继承比复制粘贴更安全，但必须显式调用.btn-variant()等混合；混合不产生级联，仅插入声明块；变量注入需注意作用域链；响应式断点应封装进混合；伪元素需单独调用混合。
直接继承比复制粘贴更安全，但必须显式调用 .btn-variant() 这类混合，否则样式不会自动透传。
混合继承不是 CSS 继承，必须显式调用
Less 中的混合（Mixin）不产生选择器级联关系，它只是把声明块“复制粘贴”到目标规则中。你写 .btn-primary { .btn-variant(#007bff; #007bff; #fff); }，编译后才生成实际的 .btn-primary、.btn-primary:hover 等规则；如果漏掉这句调用，整个按钮状态逻辑就丢失了。
- 常见错误：把
.btn-variant()当成类似extend的语法，以为定义一次就能全局生效 - 正确做法：每个新按钮类都必须主动调用，哪怕参数完全一样
- 调试技巧：编译后检查输出 CSS 是否真包含
:hover和:active块，而不是只看 Less 源码里有没有定义
变量注入比硬编码更可控，但要注意作用域链
混合支持参数，也支持访问外部变量——但变量查找顺序是：局部参数 > 调用时所在作用域 > 全局变量。这意味着你在 .btn-outline-warning 里改了 @btn-border-color，不会影响 .btn-primary，除非你显式传参或重定义。
- 推荐写法：
.btn-outline-success { .btn-variant(transparent; @success-color; @success-color); }，复用变量而非字面量 - 避免陷阱：不要在混合内部重新赋值全局变量（如
@bg: darken(@bg, 5%);），这会破坏调用方的原始值 - 性能提示：变量计算在编译期完成，不影响运行时，但嵌套过深（比如在循环 mixin 里反复调用
lighten()）可能拖慢编译速度
响应式断点要封装进混合，不能靠外层媒体查询兜底
如果你把 @media (max-width: 768px) 写在 .btn 外面，再让所有按钮类去继承，那断点逻辑就和按钮实现脱钩了——后续新增 .btn-sm 时容易漏加响应式规则。应该把断点判断放进混合本身。
- 可行方案：定义
.btn-responsive(@padding-base; @font-size-base)，内部包含媒体查询分支 - 注意兼容性：Less 4.x 支持
@media嵌套，但旧项目若用 Less 1.x 或某些构建工具（如 koala），需确认是否支持嵌套媒体查询 - 别依赖 CSS 层叠：不要指望
.btn-sm继承了.btn就自动获得响应式 padding，混合不传递媒体查询上下文
最容易被忽略的是伪元素继承——::before 和 ::after 不会自动应用父选择器里的混合，哪怕你写了 .btn { .border-box(); }，也得单独给 .btn::before { .border-box(); }。这不是 bug，是 Less 编译模型决定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
