用Sass @each/@for 自动生成按钮状态样式，可将代码量压缩至1/5，避免漏写状态导致可访问性问题；需规范状态顺序、处理disabled双写、用@at-root控制层级，并统一声明过渡动画。
按钮组状态样式重复写太累？用Sass @for 或 @each 拆解逻辑
直接说结论：别手写 .btn-primary:hover、.btn-primary:active、.btn-primary.disabled 这类组合，Sass 循环能帮你把“按钮类型 × 状态”这个二维关系自动展开，代码量压到 1/5，改色或加新状态时也不漏。
关键不是炫技，是避免手动维护时漏掉某个状态——比如新加了 .btn-outline 类型，但忘了补 :focus-visible 样式，结果键盘用户 tab 到按钮时没焦点反馈，可访问性直接掉线。
-
@each更适合按语义分组，比如遍历$button-variants: (primary: #007bff, secondary: #6c757d, success: #28a745) -
@for更适合数值型控制，比如生成.btn-size-xs到.btn-size-xl的字号/内边距阶梯 - 状态列表建议单独抽成变量，如
$button-states: (hover: &:hover, active: &:active, focus: &:focus, disabled: &:disabled)，方便统一增删
Sass 循环里怎么处理 :disabled 和 [disabled] 双写问题
CSS 中 实操建议：状态映射表里把 这样生成出来的 CSS 就天然兼容原生和自定义按钮容器，不用额外补丁。 如果 Sass 循环生成的样式顺序是 循环嵌套太深容易产出像 解决办法：在循环体内用 这样生成的 CSS 是平级的 复杂点在于：循环本身不解决设计系统一致性问题——颜色值、圆角、阴影这些仍要靠设计 Token 管理；Sass 只是让“把 Token 映射到 CSS”的过程别出错。最容易被忽略的，是状态之间过渡动画的统一声明，比如所有 button:disabled 不生效于自定义组件（比如用 .btn[disabled] 才能覆盖。循环里漏掉这个，视觉上“禁用态”就只在原生 上生效。disabled 对应的 selector 写成 [disabled], &:disabled，而不是单纯 &:disabled：$button-states: (
hover: "&:hover",
focus: "&:focus",
disabled: "[disabled], &:disabled"
);
伪类嵌套顺序影响可访问性？
:focus 必须在 :hover 后面:hover → :focus → :active，那鼠标悬停后点下去，:active 样式可能被 :hover 覆盖（因为权重相同，后声明者胜出）。更严重的是，键盘用户 tab 进来时，:focus 如果写在 :hover 前面，悬停时焦点样式反而会消失。
:hover → :focus → :active → :disabled
@each 遍历时，确保 $button-states 的 map 键顺序符合这个逻辑（Sass 3.4+ 保留 map 插入顺序）!important 去硬压顺序——它会让后续覆盖调试变困难，也违反 BEM/CSS-in-JS 的可预测原则编译后 CSS 体积暴增？用
@at-root 控制选择器层级.btn-group .btn-primary:hover .btn-icon svg 这种过度具体的选择器，不仅体积大，还导致局部样式难以覆盖（比如想单独改图标颜色，得写更长的选择器才能赢过它）。@at-root 把状态规则提一层，避免父选择器层层叠加：@each $name, $color in $button-variants {
.btn-#{$name} {
background-color: $color;
@at-root .btn-#{$name}:hover { background-color: darken($color, 10%); }
@at-root .btn-#{$name}.disabled { opacity: 0.6; }
}
}
.btn-primary:hover，而非嵌套的 .btn-group .btn-primary:hover，维护性和性能都更可控。:hover 都该有 transition: background-color 0.15s，这个得单独拎出来写，不能塞进循环里，否则不同按钮类型可能过渡时长不一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
