用带参数mixin封装表单控件通用样式：定义.form-control-base()抽离box-sizing、font-size等不变项，将padding、border-radius等设为可选参数，默认兜底值；尺寸变体用when守卫匹配映射表；避免css变量替代，因mixin编译期生成静态css，支持嵌套与精准错误定位。
Less里怎么用Mixin封装表单控件的通用样式
直接说结论：用带参数的Mixin定义视觉基类（比如form-control-base），把边框、尺寸、过渡、焦点态等共性抽出来，再让input、select、textarea各自调用并叠加语义化修饰。不是写一堆重复的border-radius: 4px。
常见错误是把所有样式塞进一个Mixin里，结果每次调用都得传七八个参数；或者反过来，每个控件各写一套，改圆角时要改三处。
- 只抽「变」与「不变」之间稳定的交集：比如所有表单控件都要有
box-sizing: border-box、统一的font-size和line-height，这些放基类 - 把真正会变的（如
height、padding、background）做成可选参数，默认值设为合理兜底值 - 别在Mixin里写
:focus伪类的具体颜色——颜色属于主题层，应该由调用方传入@focus-color变量
.form-control-base(@padding-y: 0.375rem, @padding-x: 0.75rem, @border-radius: 0.25rem, @focus-color: #007bff) {
display: block;
width: 100%;
padding: @padding-y @padding-x;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: @border-radius;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
<p>&:focus {
color: #495057;
background-color: #fff;
border-color: @focus-color;
outline: 0;
box-shadow: 0 0 0 0.2rem fade(@focus-color, 25%);
}
}</p>
为什么不能直接用CSS自定义属性替代Mixin
因为Less Mixin在编译期就完成样式拼装，生成的是扁平、无运行时开销的CSS；而CSS自定义属性需要浏览器在渲染时计算，且无法做条件逻辑（比如“如果控件是textarea，就加min-height”）。
典型踩坑：有人试图用--form-height控制所有控件高度，结果input和textarea必须用JS同步设置不同值，反而破坏了样式声明的静态性。
- 自定义属性适合主题切换、暗色模式等需运行时响应的场景；Mixin适合构建确定的、复用的视觉结构
- Mixin能嵌套调用（比如
.form-control-base()里再调用.reset-appearance()），CSS变量做不到 - 构建工具（如Webpack + less-loader）对Mixin的source map支持更成熟，报错能准确定位到.less行
如何让Mixin适配不同尺寸变体（sm/lg）
别为每种尺寸单独写一个Mixin，用参数+条件判断更干净。Less的when守卫可以精准控制分支，比一堆.form-control-sm类名更易维护。
错误做法是复制三遍Mixin内容，只改padding和font-size；正确做法是让尺寸成为参数，并内置规则映射。
- 定义尺寸映射表：
@size-map: { sm: (0.25rem, 0.5rem, 0.2rem), lg: (0.5rem, 1rem, 0.3rem) }; - 用
.form-control-base(...)接收@size: normal，内部用when (@size = sm)匹配并解构对应值 - 避免用
font-size: calc(1rem * 0.875)这种运行时计算——它会让字体缩放失去可访问性保障
.form-control(@size: normal, @focus-color: #007bff) when (@size = sm) {
.form-control-base(0.25rem, 0.5rem, 0.2rem, @focus-color);
font-size: 0.875rem;
}
.form-control(@size: normal, @focus-color: #007bff) when (@size = lg) {
.form-control-base(0.5rem, 1rem, 0.3rem, @focus-color);
font-size: 1.25rem;
}
使用Mixin时容易被忽略的继承与覆盖问题
Less不支持CSS那样的层叠优先级，Mixin展开后就是普通CSS规则。所以当多个Mixin作用于同一选择器时，后声明的会覆盖先声明的同名属性——这点和开发者直觉相反。
比如同时调用.form-control-base()和.has-validation()，若两者都设了border，后者会生效，但没人检查过这个覆盖是否合理。
- 在Mixin内部避免写过于宽泛的重置（如
all: unset），它会干掉父级可能依赖的font-family - 用
!important对抗覆盖？不行。它会让下游无法定制，也破坏CSS权重逻辑 - 真正安全的做法是：基类Mixin只设必要属性，装饰类Mixin（如
.is-invalid）只改它该改的那几项，比如border-color和background-image
最麻烦的其实是伪元素——::placeholder的颜色没法通过参数传进去，得单独写一个.form-control-placeholder(@color)，并在调用时显式追加。这事容易漏，一漏就是整站placeholder灰度不一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
