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

一种选择就是声明标准的透明边框。

然后背景颜色显示到边框。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如何封装CSS属性以防止重复自己

1 个答案: