正确做法是定义方向映射表 $border-directions: ("t": "top", "r": "right", "b": "bottom", "l": "left")，再嵌套 @each $key, $prop in $border-directions 确保 .border-t-2 编译为 border-top: 2px，而非错误插值；需三层嵌套覆盖方向、宽度、样式组合，并统一单位、隔离前缀、响应式用 @each 套 @media。
不能只用一层 @each 遍历方向数组就完事——方向必须和边框属性（border-top、border-left 等）严格绑定，否则生成的类名和实际样式会错位。
为什么 border-t-2 不能对应 border-top: 2px？
常见错误是把方向缩写（如 t）直接映射成 border-#{$dir}，然后套用 @each $dir in ("t", "r", "b", "l")。这在 left/right 上碰巧能用，但 t 对应的是 border-top，而工具类名 border-t-2 的语义是“上边框”，不是“设色边”。关键在于：类名表达用户意图，CSS 属性表达渲染逻辑，二者需解耦设计。
正确做法是定义方向映射表：
$border-directions: ( "t": "top", "r": "right", "b": "bottom", "l": "left" );
再用嵌套 @each $key, $prop in $border-directions，确保 .border-t-2 编译出 border-top: 2px，而不是靠插值猜。
立即学习“前端免费学习笔记（深入）”；
@each 嵌套 @each 才能覆盖所有组合
边框类不是只有方向和尺寸两个维度，还涉及样式（solid、dashed）、颜色（主题色或中性色）、宽度（1px 到 4px），缺一不可。单层循环无法安全组合。
- 先遍历方向映射：
@each $class-key, $css-prop in $border-directions - 再遍历宽度值：
@each $size-key, $size-val in $border-widths - 最后可选遍历样式：
@each $style-key, $style-val in $border-styles
例如生成 .border-t-2-dashed 类时，$css-prop 是 "top"，$size-val 是 2px，$style-val 是 dashed，三者拼接才完整：
.border-#{$class-key}-#{$size-key}-#{$style-key} {
border-#{$css-prop}: #{$size-val} #{$style-val} currentColor;
}
容易踩的坑：单位混用、伪类干扰、命名冲突
生成边框类时最常翻车的三个点：
-
$border-widths必须统一用带单位的数值（如1px、2px），别混用字符串"2"+ 拼接"px"——Sass 会静默拼成"2px"，但某些构建工具在压缩阶段会丢掉引号导致无效 - 如果同时生成
:hover变体（如.border-t-2:hover），注意不要在@each外层加&:hover，否则所有类都会套一层 hover，应单独写块处理变体 - 类名前缀必须隔离，比如用
u-border-而非裸名border-，避免和 Bootstrap 的.border或 Tailwind 的border-r冲突；尤其当项目已引入 UI 库时，CSS 优先级可能被意外覆盖
响应式边框类必须用 @each 套 @media，不能用 @for
想生成 md:border-t-3 这类断点类，@for 根本做不到——它无法把断点名注入选择器字符串开头。唯一可靠方式是：
@each $breakpoint, $query in $breakpoints {
@media #{$query} {
@each $class-key, $css-prop in $border-directions {
@each $size-key, $size-val in $border-widths {
.#{$breakpoint}-border-#{$class-key}-#{$size-key} {
border-#{$css-prop}: #{$size-val} solid currentColor;
}
}
}
}
}
其中 $breakpoints 必须是 map，key 为无引号标识符（md、lg），value 为媒体查询字符串（"(min-width: 768px)"）。若 value 是数值（如 768px），@media (min-width: #{$query}) 里就得手动加引号。
真正麻烦的不是写法，而是调试：一旦某个断点没生效，问题往往出在 $query 的字符串格式、map key 是否被引号包裹、或者构建流程里媒体查询被 PurgeCSS 误删——这些都比编译报错更难定位。
