css - 将第三方 css 实现到自己的 less 结构中

Question

如果我想实现第三方 css，这是我从外部源提供到我自己的 less-compile 结构中的。有什么可靠的方法可以解决这个问题。因为我可以预期外部源会不时更新，所以我希望尽可能少地对其进行更改，同时以某种方式将其映射到我本地编译的 css 中。

例如，如果我的样式表将按钮类设置为“k-button”，而外部 css 将其设置为“button”，是否有一种很好的方法可以使名称匹配同时仍确保它们完全独立？

Answer 1

您可以使用 extend feature :

以下 Less 代码:

.button {
background-color: yellow;
}
.button-k {
background-color: red;
}

.button:extend(.button-k){}

输出:

.button {
  background-color: yellow;
}
.button-k,
.button {
  background-color: red;
}

导致 .button 的 background-color 现在将是 red。

在两个类没有设置相同属性的情况下，您可以尝试重置.button-k 未定义的值:

.button {
border: 1px solid white;
background-color: yellow;
}
.button-k {
border: initial;
background-color: red;
}

.button:extend(.button-k){}

如果没有 border: initial; 声明，.button 类仍然会从原始声明中获得白色边框。