应使用 Sass Mixin 抽取表单控件通用样式：定义 form-control-base() 统一基础尺寸、边框、字体与过渡；form-control-size() 按 $size 参数分档适配响应式；form-control-state() 拆分 hover/focus/disabled 状态并规范顺序；禁用态同步 cursor 与背景色；纯样式复用一律用 @include 而非 @extend。
怎么用 Sass Mixin 抽取表单控件的通用样式
直接复用 input、textarea、select 的边框、尺寸、聚焦态逻辑，靠写一堆重复 CSS 是最慢的。Sass Mixin 的核心价值不是“炫技”，是让同一套视觉规则（比如 1px solid #d1d5db、圆角 6px、禁用态灰度）能被所有表单元素一致调用。
实操建议：
- 把「基础尺寸+边框+字体+过渡」打包成
form-control-base()，所有控件都先 @include 它 - 聚焦态统一用
&:focus+outline: none+box-shadow，避免浏览器默认 outline 跳变 - 禁用态别只改
opacity，要同步设cursor: not-allowed和background-color，否则视觉和交互不一致
为什么 form-control-size() 要按 $size 参数分档而不是写死 px
响应式表单里，sm / md / lg 不只是字号变化——内边距、行高、圆角、图标尺寸都要联动缩放。硬写 padding: 4px 8px 看似快，但后续加暗色模式或适配移动端时，你得翻遍所有文件改数值。
实操建议：
- 定义 map：
$form-sizes: (sm: (p: 4px 8px, fs: 12px), md: (p: 8px 12px, fs: 14px)) - Mixin 内用
map-get($form-sizes, $size, p)拿值，比 if/else 判断更易维护 - 别在 mixin 里写
@media，尺寸分级本身已解决多数断点需求；真要媒体查询，单独抽form-control-responsive()
form-control-state() 怎么避免 :hover/:focus/:disabled 堆叠失效
常见错误是把 hover、focus、disabled 全塞进一个 selector 里写，比如 &:hover:focus:disabled —— 这根本不会触发，因为 disabled 元素不响应 hover/focus。状态组合必须拆开写，且顺序有讲究：:disabled 要放在最后，否则会被前面的 :hover 覆盖。
实操建议：
- 每个状态单独写块：
&:hover { ... }、&:focus { ... }、:disabled { ... } - 聚焦态务必加
z-index: 1（尤其带下拉箭头的select），否则 shadow 可能被父容器裁掉 - 禁用态颜色用
darken($gray-300, 10%)而非固定#9ca3af，确保主题色变更时自动适配
用 @extend 复用占位符还是只用 @include？
答案是：纯样式复用一律用 @include，@extend 只用于语义化结构复用（比如 %form-label 和 %form-help-text）。Mixins 生成的是独立 CSS 规则，调试时能精准定位到源文件；而 @extend 会把样式合并到选择器链里，一旦多个组件 extend 同一占位符，CSS 输出顺序混乱，!important 都难救。
实操建议：
- 所有表单 Mixin 命名带
-control后缀（如form-control-base），避免和布局类混淆 - 不要给 Mixin 加
!default参数，除非真需要覆盖（比如暗色模式开关），否则增加理解成本 - 变量全部用
$form-前缀（如$form-border-radius），防止和项目其他模块冲突
真正麻烦的不是写几个 Mixin，而是当设计系统要求「所有输入框在焦点时右侧显示校验图标」——这时候你得决定图标的插入方式（伪元素？额外 DOM？SVG inline？），以及如何让 Mixin 不侵入 HTML 结构。这层耦合，Sass 解决不了，得靠组件封装边界来划清。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
