Question

我必须为WP主题创建一个外观，所以我需要将所有具有相似属性的选择器组合在一起（例如'color'）。

任何建议如何使用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

你可以写下你的假班＆＃34;在单独的.less文件中，然后使用@import (reference)。

fake.less：

.fake {
  color: red;
}

real.less：

@import (reference) "fake.less";

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

real.css：

.real {
  color: red;
}

Sass支持占位符，在这种情况下更方便。较少的贡献者一直在考虑实施类似的功能（具有高优先级，请参阅https://github.com/less/less.js/issues/1177）超过一年......所以我认为上面的解决方法可能对您有所帮助。

减去Css - 需要创建css皮肤（使用扩展）

1 个答案: