在Less中用带参数的Mixin（如.form-field()）封装表单单元，按功能拆分为.input-base()、.error-message()等，暴露@border-color等关键参数，用when条件处理验证状态，确保@import变量优先、命名规范、权重可控。
Less里怎么写可复用的表单样式模块
直接说结论：用.form-field()这类带参数的Mixin封装输入框、选择器、错误提示等基础单元，比写一堆重复类名更可控，也比全局覆盖更安全。
关键不在“封装”本身，而在参数设计是否贴合真实修改点——比如@border-color、@error-color、@size这些必须暴露，而@transition-duration这种次要项可以设默认值。
- 别把整个表单塞进一个Mixin里，拆成
.input-base()、.label-required()、.error-message()更易组合和调试 - 所有颜色/尺寸参数都加
@前缀，避免和CSS自定义属性混淆；传参时用@color: #333语法显式声明默认值 - 慎用
!important——它会让下游项目无法覆盖，改用层级或更具体的类名（如.form-field--large）来提升优先级
为什么&:focus和&:hover状态要单独抽成Mixin
因为不同组件对交互反馈的要求差异很大：输入框需要高亮边框+阴影，开关按钮要变色不加阴影，而禁用态下所有伪类都该被跳过。硬编码在主Mixin里会导致逻辑耦合。
实操建议是写一个.interactive-states()，只处理视觉变化，不绑定具体DOM结构：
立即学习“前端免费学习笔记（深入）”；
.interactive-states(@focus-color: #007bff, @hover-bg: #f8f9fa) {
&:hover {
background-color: @hover-bg;
}
&:focus {
outline: none;
box-shadow: 0 0 0 2px fade(@focus-color, 25%);
}
}
- 调用时传
@focus-color: @primary，比写死#007bff更利于主题切换 - 如果某个字段不需要
:hover效果（比如只读日期控件），就只调用.focus-only()子Mixin - 注意
box-shadow的透明度计算用fade()而非rgba()，前者能自动适配颜色明暗变化
表单验证状态（.is-error、.is-success）怎么动态注入样式
不能靠JS手动加类再写一堆CSS规则。Less里用when条件判断+嵌套规则，让状态样式随参数自动展开。
例如定义.form-field(@status: normal)，内部用when (@status = error)分支控制边框色、图标、提示文字：
.form-field(@status: normal) when (@status = error) {
border-color: @error-color;
.form-field__icon { color: @error-color; }
.form-field__message { color: @error-color; }
}
- 状态参数值必须是字符串字面量（
"error"），不能是变量，否则Less编译时无法匹配when - 多个状态共存时（如
is-error is-touched），优先用独立类名组合，而不是在Mixin里堆when嵌套，否则维护成本飙升 - 图标颜色别直接写
#dc3545，统一走@error-color变量，方便后续换肤
为什么@import顺序和命名直接影响表单样式覆盖成败
Less不是CSS，@import不是加载资源，而是文本拼接。如果variables.less在form-mixins.less之后引入，所有@primary都会是undefined。
典型失败路径：main.less → @import "form-mixins" → @import "variables" → 编译报错Undeclared variable: @primary
- 强制约定：所有
variables.less必须放在最顶层@import链首位 - 表单相关Mixin集中放在
mixins/form/目录，命名带-form后缀（如input-form.less），避免和布局Mixin混淆 - 项目级定制样式（如
.login-form）必须放在所有通用Mixin之后，确保它的选择器权重能压过基础规则
复杂点在于状态叠加和主题切换同时存在时，Mixin参数、CSS类名、JS状态标记三者必须对齐——少一个环节，就会出现“明明加了is-error但边框没变红”的情况。
