html - 如何创建 css 皮肤(使用扩展)

Question

我必须为 WP 主题创建皮肤，因此我需要将所有具有相似属性(例如“颜色”)的选择器组合在一起。

关于如何使用 Less 创建类似 CSS 皮肤的任何建议？我最终得到了这个解决方案......

h1, h2, h3, h4, h5, h6{
   &:extend(.heading-color);
   font-size: 12px;
}

.another-selector{
   &:extend(.heading-color);
   font-size: 24px;
}

.heading-color{
        color: red;
}

这个输出:

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 12px;
}
.another-selector {
  font-size: 24px;
}
.heading-color,
h1,
h2,
h3,
h4,
h5,
h6,
.another-selector {
  color: red;
}

除了我需要创建一个“假”类“.heading-color”之外，这非常有效。

Answer 1

您可以在单独的 .less 文件中编写您的“假类”，然后使用 @import(引用)。

fake.less:

.fake {
  color: red;
}

真实.less:

@import (reference) "fake.less";

.real {
  &:extend(.fake);
}

真实的.css:

.real {
  color: red;
}

Sass 支持placeholder，这在这种情况下更方便。一年多来，较少的贡献者一直在考虑实现类似的功能(具有高优先级，请参阅 https://github.com/less/less.js/issues/1177)...因此我认为上述解决方法可能对您有所帮助。