Less中定义checkbox/radio选中态颜色最稳妥方式是复用checkbox-variant mixin，其需传入精确父选择器和主题色变量，避免硬编码、函数嵌套及遗漏disabled等状态样式。
Less混合宏怎么定义 checkbox/radio 的选中态颜色
直接复用 @mixin checkbox-variant 是最稳妥的方式，它把状态样式和颜色变量解耦开，避免硬编码。关键不是写新 mixin，而是理解它的两个参数：父选择器（比如 .form-group）和主题色（比如 #007bff）。调用时必须传入具体选择器，否则生成的 CSS 规则会失效。
- 父选择器要精确匹配 HTML 结构，例如
input[type="checkbox"]前面有.custom-control，那$parent就得是".custom-control" - 颜色值支持变量或字面量，但别传函数如
darken($color, 10%)进去——mixins 不展开嵌套函数调用，会导致编译报错Undefined operation - 伪元素
::before和::after的样式必须成对出现，漏掉&::after会导致对勾图标不显示
如何为不同表单区域应用独立主题色
不能只靠一个 mixin 调用完事。真实项目里，登录区、设置页、弹窗里的 checkbox 往往需要不同主色。这时要配合 Less 的作用域和命名空间，用嵌套 + 参数传递实现隔离。
- 把每个业务模块封装成独立规则块，例如
.login-form { .checkbox-variant(&, @login-primary); } - 避免全局覆盖：不要在顶层直接调用
.checkbox-variant("body", ...)，否则所有页面 checkbox 都被统一染色 - 如果某区域需禁用 hover 效果，就在该区域 mixin 调用后加覆盖规则：
.settings-form input[type="checkbox"]:hover + label::before { opacity: 1; }
编译后 CSS 体积暴增？检查 mixin 调用是否冗余
每次调用 @mixin checkbox-variant 都会生成一套完整规则，哪怕颜色相同。比如 .a 和 .b 都传了 #007bff，结果是两份重复 CSS，而不是合并成一条规则。
- 优先用 CSS 自定义属性（
--control-checked-color）+ 单次 mixin 定义，再通过:root或局部 class 设置变量值 - 若必须用 mixin 多次调用，确保父选择器足够具体，防止生成无效选择器如
.form .form .checkbox:checked + label - 开启 Less 编译器的
strictMath: true选项，能提前捕获颜色计算错误，避免静默生成错误样式
为什么 disabled 状态没生效
@mixin checkbox-variant 默认只处理 :checked，不包含 :disabled。这是最容易忽略的一环——视觉上控件灰掉了，但用户仍能点击，或者点击后无反馈。
立即学习“前端免费学习笔记（深入）”；
- 必须手动补全 disabled 样式，建议在 mixin 外单独写：
input[type="checkbox"]:disabled + label { opacity: 0.6; cursor: not-allowed; } - 如果要让 disabled 的 checkbox 也带主题色（比如灰色底 + 蓝色边框），就得扩展原 mixin，增加
$disabled-color参数并判断分支 - 注意浏览器默认样式干扰：某些旧版 Chrome 会忽略
input:disabled + label::before，需加pointer-events: none强制禁用交互
