Html 如何使用SCS生成边框宽度实用程序

大家好，我有一个类列表，我想生成这些类来处理边框宽度属性，例如：

我如何使用SCSS

类行-y-0

属性边框顶部宽度：0

---

一种方法是使用SCSS循环生成所有类，但必须指定最大的边框宽度。在本例中，我将其缓存为变量

$maxist border width

$biggest-border-width: 10;

@for $i from 0 through $biggest-border-width {
  .line-y-#{$i} {
    border-top-width: $i*1px;
  }

  .line-x-#{$i} {
     border-left-width: $i*1px;
  }
}

// Add here the fixed static values so they can overwrite the ones generated with the loop.
.line-y: {
   border-top-width: 1px;
}

此代码将生成以下CSS：

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

---

谢谢，它工作得很好，但是如果我想添加这些新类“line-y”：1px，“line-x”：1px，“line-y-reverse”：1，“line-x-reverse”：1，您可以在循环之外添加它们。如果你在循环之前添加它们，循环类将覆盖它们，反之亦然。如果你在循环之后添加它们，它们将覆盖循环类。看看代码，我的朋友I jst添加了一些东西，所以你希望

。line-y

始终是1px，而

。line-y-reverse

始终是1px？这四门课的想法是什么？

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