你如何编写一个 LESS 规则供多个 类 使用？

Question

假设我们需要一些不同的 类 来使用以下内容：

color:#ccf;
background-color:#fcc;
font-size:0.7em;

我们如何在 LESS 中进行设置？

这些 类 不能相互使用，因此将它们设置在逗号分隔列表 (.note, .product, .restricted{ }) 中不是解决方案。

我们需要这样的东西：

@myClass{
    color:#ccf;
    background-color:#fcc;
    font-size:0.7em;
}

.note{@myClass}
.product{@myClass}
.restricted{@myClass}

我试过了，它的杀伤力很小。

Answer 1

您想使用 LESS mixins:

.mixin-name() { //mixin which can be used by any selector
  color:#ccf;
  background-color:#fcc;
  font-size:0.7em;
}

.note {
  .mixin-name();
}

.product {
  .mixin-name();
}

.restricted {
  .mixin-name();
}