变量需绑定语义而非外观，如@brand-primary优于@blue-500；mixin须覆盖:focus等可访问性状态；组件样式应加命名空间前缀或哈希类名；递归mixin需守卫条件防死循环；避免过度封装以保障细粒度复用。
Less变量怎么定义才真正复用得起来
变量不是写在最上面就叫“可复用”，关键看它是否绑定语义、脱离具体场景。比如@primary-color比@blue-500更易维护，因为前者描述用途，后者只描述外观。
- 颜色/间距/圆角等基础值优先抽成带业务语义的变量，如
@brand-primary、@spacing-md - 避免在变量里写复合值（如
@btn-default: "1px solid #ccc, 2px dashed red"），这种写法会让下游无法拆解重用 - 变量作用域要小心：嵌套规则里的
@var不会自动提升到全局，跨文件要用@import (reference)引入变量文件，而不是普通@import
Mixin封装按钮样式时为什么老是漏掉:focus状态
很多人写.btn() mixin只覆盖:hover和:active，但键盘用户依赖:focus，缺了它等于放弃可访问性，而且某些浏览器（如Safari）默认不给button加:focus轮廓，容易误以为没生效。
- 标准按钮mixin至少应包含
&:hover、&:active、&:focus、&:focus-visible四组规则 - 别把
outline直接设为none，改用outline: 2px solid @focus-color配合outline-offset: 2px - 如果项目需兼容IE，
:focus-visible要单独用@supports包裹，否则IE会整条规则失效
如何让一个Less组件样式不污染全局CSS选择器
直接写.card { ... }看似简单，但一旦多个团队共用同一份样式库，.card就可能被其他模块意外覆盖或覆盖别人——这不是命名空间问题，是作用域问题。
- 用
:local(.card)语法（需配合webpack less-loader开启javascriptEnabled和modifyVars支持）生成哈希类名 - 更稳妥的做法是约定前缀+命名空间，例如所有组件级class都以
u-开头：.u-card、.u-card__header - 慎用
!important：它会让下游无法覆盖，反而降低复用性；真要强制优先级，用更具体的选择器，比如.u-card.u-card--large
当Less编译报错“Recursive call to mixin”时该怎么查
这不是语法错误，而是逻辑死循环。常见于条件判断不全的mixin递归，比如想实现多层嵌套间距，但忘了终止条件。
- 检查所有带
.mixin-name(@n)参数的mixin，确认@n是否在每次调用时都严格递减，且有when (@n > 0)守卫 - 避免在
.loop()里直接调用自身而不传参，Less不支持无参递归 - 调试技巧：在mixin开头加
// debug: @n注释，编译后看输出里是否出现无限重复的注释行
.btn()，看着省事，但后续想单独调整图标大小或禁用状态文字色，就得撕开重写——复用性恰恰毁在这种“过度封装”里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
