如何使用SCSS生成border-width属性的边框工具类？

嘿，这事儿不难！咱们可以利用SCSS的@each循环来遍历你定义的$line-widths变量，自动生成对应的工具类。我帮你拆解一下思路，直接上代码：

$line-widths: (
  "line-y-0": 0, // border-top-width & border-bottom-width: 0;
  "line-x-0": 0, // border-left-width & border-right-width: 0;
  "line-y-2": 2px, // border-top-width & border-bottom-width: 2px;
  "line-x-2": 2px, // border-left-width & border-right-width: 2px;
  "line-y": 1px, // border-top-width & border-bottom-width: 1px;
  "line-x": 1px, // border-left-width & border-right-width: 1px;
  "line-y-reverse": 1, // --line-y-reverse: 1;
  "line-x-reverse": 1, // --line-x-reverse: 1;
) !default;

// 遍历生成工具类
@each $name, $value in $line-widths {
  // 处理 line-y-* 和 line-x-* 对应的边框宽度类
  @if str-index($name, "line-y") and not str-index($name, "reverse") {
    .#{$name} {
      border-top-width: $value;
      border-bottom-width: $value;
    }
  } @else if str-index($name, "line-x") and not str-index($name, "reverse") {
    .#{$name} {
      border-left-width: $value;
      border-right-width: $value;
    }
  } 
  // 处理 reverse 对应的自定义 CSS 变量
  @else if str-index($name, "reverse") {
    .#{$name} {
      --#{$name}: #{$value};
    }
  }
}

代码说明 #

• 遍历变量：用@each循环逐个取出$line-widths里的类名和对应值，不用手动写每个工具类，效率拉满。
• 区分Y/X方向：通过str-index判断类名里的line-y或line-x（排除reverse后缀），分别生成上下边框（Y轴）或左右边框（X轴）的宽度样式。这里我修正了你变量里的注释笔误，line-y对应上下边框、line-x对应左右边框，更符合常见的工具类逻辑（类似Tailwind的border-y/border-x）。
• 处理Reverse类：如果类名包含reverse，就生成对应的CSS自定义属性，方便你后续在其他样式里复用这个变量。

编译后的CSS效果 #

生成的最终CSS会是这样的，直接就能在HTML里用这些类：

.line-y-0 {
  border-top-width: 0;
  border-bottom-width: 0;
}
.line-x-0 {
  border-left-width: 0;
  border-right-width: 0;
}
.line-y-2 {
  border-top-width: 2px;
  border-bottom-width: 2px;
}
.line-x-2 {
  border-left-width: 2px;
  border-right-width: 2px;
}
.line-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.line-x {
  border-left-width: 1px;
  border-right-width: 1px;
}
.line-y-reverse {
  --line-y-reverse: 1;
}
.line-x-reverse {
  --line-x-reverse: 1;
}

如果你确实需要单个方向的边框（比如只设置border-top-width），只要调整代码里的属性，把border-top-width和border-bottom-width改成只保留其中一个就行，灵活得很~

内容的提问来源于stack exchange，提问作者HoussamDev