html - 如何封装CSS属性防止重蹈覆辙

Question

我正在向一个元素添加两个具有相同值的 CSS 属性:

var hex = window.lineColors[a.options.labels.length - 1];

$('.container#buttonContainer').append('<button type="button" class="btn btn-primary" style="background-color:' + hex + '; border-color: ' + hex + '">' + date.format("DD/MM/YYYY") + '</button>');

如您所见，background-color 和 border-color 共享相同的值 hex，我正在尝试探索最好的删除此重复项的方法。

由于 hex 包含许多预选值之一，一种可能性是为每个值设置一个 CSS 类，例如:

button_003C69
{
   background-color: #003C69;
   border-color: #003C69;
}

我可以使用预处理器自动生成这些。

我也希望我能以某种方式将十六进制传递给 CSS 类供其使用，但只有预处理器允许这样做，因此在运行时不可用。

我只知道我在这里漏掉了一个技巧，你们如何最好地处理这种情况？

Answer 1

一个选项就是声明一个标准的透明边框。

然后背景色通过边框显示。

button {
  /* demo properties */
  width:200px;
  height:75px;
  display: block;
  margin:10px auto;
  border-width:5px;
  border-style:solid;
  /* transparent border */
  border-color:transparent
}

.A {
  background: pink;
}

.B {
  background: lightblue;
}

<button>No Class</button>
<button class="A">Button A</button>
<button class="B">Button B</button>