最直接方式是用@for $i from 1 through 5生成.badge-1至.badge-5；更推荐用@each遍历$badge-states map实现语义化状态徽章，配合&:hover和&.is-disabled嵌套伪类，并统一抽离基础样式避免css覆盖问题。
用 @for 生成带序号的徽章类名（如 .badge-1 到 .badge-5）
SCSS 中最直接的方式是用 @for 遍历数字范围，配合插值拼出类名。注意起始值从 1 开始（不是 0），否则会生成无意义的 .badge-0：
@for $i from 1 through 5 {
.badge-#{$i} {
background-color: hsl(200 + $i * 20, 70%, 60%);
color: white;
padding: 0.2em 0.6em;
border-radius: 4px;
font-size: 0.75em;
}
}
常见错误是写成 from 0 to 5 —— 这只会到 4，且多一个 0 类；through 才包含终点。
用 @each 生成语义化状态徽章（如 .badge-success）
实际项目中更常用状态名而非数字。用 @each 遍历 map 更清晰，也方便后续扩展颜色、文字色等配置：
$badge-states: (
success: #28a745,
warning: #ffc107,
danger: #dc3545,
info: #17a2b8,
primary: #007bff
);
<p>@each $state, $color in $badge-states {
.badge-#{$state} {
background-color: $color;
color: #fff;
padding: 0.2em 0.6em;
border-radius: 4px;
font-size: 0.75em;
}
}</p>
容易踩的坑：map 键名不要加引号（"success"），否则插值后类名会带引号；变量名 $badge-states 建议统一命名，避免和 Bootstrap 的 $theme-colors 冲突。
加 hover / focus 状态时，别漏掉伪类嵌套层级
想让徽章支持悬停变暗，不能直接在外部写 .badge-success:hover —— 这会破坏 SCSS 层级结构，也不利于维护。正确做法是在循环体内用 &:hover：
- 写成
&:hover { background-color: darken($color, 10%); }，&会自动展开为当前选择器（即.badge-success:hover） - 如果还希望禁用态（
.badge-success.is-disabled），就用&.is-disabled，而不是另起一层.is-disabled - 注意
darken()对亮色（如#ffc107）效果可能不自然，建议改用mix(black, $color, 15%)更可控
导出为 CSS 时，确保输出顺序不影响 specificity
多个循环块（比如先跑状态徽章，再跑数字徽章）会导致 CSS 顺序混乱，当类名重叠时（如同时有 .badge-success 和 .badge-1），后定义的规则会覆盖前面的。解决方法：
- 把所有徽章生成逻辑收在一个 mixin 里，按需调用，避免分散在不同文件中
- 如果必须分块，把基础样式（
display、font-size等共性）抽成单独的.badge基础类，再用循环只生成修饰类 - 编译后检查生成的 CSS，确认
.badge.success没被.badge-1的声明意外覆盖
真正麻烦的不是写循环，而是当设计系统升级、新增 neutral 或 outline 变体时，map 结构和颜色函数得同步更新，不然生成的类会缺样式或错色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
