如何利用Less提高样式代码的复用性 通过封装组件级公共样式实战案例|Duuu笔记
变量需绑定语义而非外观，如@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
就可能被其他模块意外覆盖或覆盖别人——这不是命名空间问题，是作用域问题。
Sheet+
Excel和GoogleSheets表格AI处理工具
下载
用
: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
注释，编译后看输出里是否出现无限重复的注释行
实际项目里最容易被忽略的，是变量和mixin的“语义粒度”。比如把整个按钮的所有样式打包进一个
.btn()
，看着省事，但后续想单独调整图标大小或禁用状态文字色，就得撕开重写——复用性恰恰毁在这种“过度封装”里。
