如何使用SCSS生成边框宽度工具类

要实现你需要的类，我们可以利用SCSS的@each循环结合字符串判断函数来遍历你定义的$line-widths变量，自动生成对应的CSS规则。以下是具体的实现代码：

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

@each $class, $value in $line-widths {
  // 处理带-reverse后缀的类：生成CSS自定义属性
  @if str-index($class, "-reverse") {
    .#{$class} {
      --#{$class}: #{$value};
    }
  } 
  // 处理line-y开头的类
  @else if str-index($class, "line-y") {
    .#{$class} {
      // 根据注释区分：带数字后缀的line-y-*对应border-top-width，纯line-y对应border-left-width
      @if str-index($class, "line-y-") {
        border-top-width: #{$value};
      } @else {
        border-left-width: #{$value};
      }
    }
  }
  // 处理line-x开头的类
  @else if str-index($class, "line-x") {
    .#{$class} {
      border-left-width: #{$value};
    }
  }
}

代码说明 #

• @each循环：遍历$line-widths中的每一组类名和对应值，自动生成每个类的CSS规则，避免重复编写冗余代码。
• str-index函数：用来判断类名中是否包含特定字符串（比如-reverse、line-y-），从而区分不同的属性生成逻辑。
• reverse类处理：对于带-reverse后缀的类，生成对应的CSS自定义属性，方便后续在其他样式中复用这个变量值。
• line-y类区分：严格按照你给出的注释规则，对带数字后缀和不带数字后缀的line-y类分别生成不同的border属性。
• line-x类处理：所有line-x开头的类统一生成border-left-width属性，匹配你定义的规则。

编译后的CSS输出示例：

.line-y-0 {
  border-top-width: 0;
}

.line-x-0 {
  border-left-width: 0;
}

.line-y-2 {
  border-top-width: 2px;
}

.line-x-2 {
  border-left-width: 2px;
}

.line-y {
  border-left-width: 1px;
}

.line-x {
  border-left-width: 1px;
}

.line-y-reverse {
  --line-y-reverse: 1;
}

.line-x-reverse {
  --line-x-reverse: 1;
}

扩展提示 #

如果你后续需要添加更多类（比如line-y-4、line-x-reverse-2等），只需要在$line-widths变量中补充对应的键值对即可，SCSS会自动生成对应的CSS规则，维护起来非常方便。

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