边框工具类必须用 @each 遍历配置 map，不可用 @for 硬套数字；宽度、样式须分设 map，键名用字符串、值用真实 css 关键字；外层遍历宽度、内层样式以保证命名规范；颜色通过单独循环注入，避免三层嵌套；响应式需外层遍历断点 map。
边框工具类必须用 @each 遍历配置 map，不能靠 @for 硬套数字——因为边框样式（solid、dashed）、宽度（1px、2px）、颜色（red、blue）三者之间没有线性数值关系，强行用索引会失去语义、难以维护。
边框样式和宽度必须分开定义为 map，不能混在 list 里
常见错误是把所有组合写成 list：$borders: ("1px-solid", "2px-dashed")。这样生成的类名（如 .border-1px-solid）无法拆解，也不能单独控制样式或宽度变更。正确做法是拆成两个 map：
$border-widths: ("1": 1px, "2": 2px, "4": 4px)$border-styles: ("solid": solid, "dashed": dashed, "dotted": dotted)
键名用字符串（如 "1"）确保能安全拼进类名；值用真实 CSS 关键字（solid），不是字符串 "solid"，否则编译后 border-style: "solid" 无效。
生成 .border-{w}-{s} 类时，嵌套顺序决定可读性和复用性
外层遍历宽度、内层遍历样式，生成 .border-1-solid 这类命名，符合直觉且便于开发者推测含义。如果反过来，样式在前，就会出现 .border-solid-1，和主流工具库（Tailwind、Bootstrap）不一致，团队协作时容易混淆。
示例结构：
@each $w-key, $w-val in $border-widths {
@each $s-key, $s-val in $border-styles {
.border-#{$w-key}-#{$s-key} {
border-width: $w-val;
border-style: $s-val;
border-color: currentColor;
}
}
}
注意：border-color: currentColor 是合理默认值——它让类可独立使用，不强制绑定颜色类；若需固定色，再叠加 .border-red 类即可。
加颜色支持时，别用三层嵌套，改用 map-get 按需注入
如果还要支持 .border-2-solid-blue，直接三层 @each 会让规则数爆炸（比如 3 宽度 × 3 样式 × 10 颜色 = 90 条）。更可控的做法是：只生成基础边框类，再用单独循环为指定颜色添加变体：
- 先定义颜色 map：
$colors: ("red": #ef4444, "blue": #3b82f6) - 再对每个颜色，复用已有宽度/样式配置：
@each $c-key, $c-val in $colors { .border-#{$c-key} { border-color: $c-val; } }
这样既能用 .border-2-solid.border-red 组合，又避免生成冗余的全量组合类。关键是：不要假设“所有宽度+所有样式+所有颜色”都必须存在，按实际使用频率裁剪。
响应式边框类必须外层遍历断点，否则 CSS 体积翻倍
想支持 md:border-2-solid，必须把断点 map 放最外层，再包裹宽度和样式的嵌套循环。错误写法是把 @media 塞进最内层，那样每个 .border-1-solid 都带一遍 @media，CSS 体积直接 × 断点数。
正确结构：
@each $bp, $query in $breakpoints {
@media (#{$query}) {
@each $w-key, $w-val in $border-widths {
@each $s-key, $s-val in $border-styles {
.#{$bp}-border-#{$w-key}-#{$s-key} {
border-width: $w-val;
border-style: $s-val;
border-color: currentColor;
}
}
}
}
}
这里 $breakpoints 必须是 map（如 ("sm": "(min-width: 320px)")），不能是 list；键名（"sm"）也必须是字符串，否则插值后变成 sm-border-1-solid 还是带引号的 "sm"-border-1-solid。
最后注意：边框类极易被 !important 或高优先级选择器覆盖，生成后务必在真实组件中测试叠加行为，尤其是和表单控件、按钮等已有边框样式的冲突点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
