css - Less继承 "virtual"类

Question

我正在使用 SASS，它有一个很好的功能:我可以创建“假/虚拟”类，然后将其用于扩展。
示例:

%myFakeClass
{
  color:#fff;
  background-color:#000;
}

.myRealClass
{
   @extend %myFakeClass;
}

.myRealClass2
{
   @extend %myFakeClass;
}

输出:

.myRealClass, .myRealClass2
{
  color:#fff;
  background-color:#000;
}

问题:
LESS 有类似的东西吗？换句话说，我想创建一个我可以继承的“虚拟类”，但输出中不存在“虚拟类”本身。

Answer 1

还没有直接

截至该日期 (11-22-2013)，仍有一个 feature request这将通过对空参数 mixins 进行扩展(它们本身不输出 css)来实现这一点。所以最终像这样的东西是可能的(它几乎完全反射(reflect)了你想要的):

.myFakeClass() {
  color:#fff;
  background-color:#000;
}

.myRealClass {
   &:extend(.myFakeClass);
}

.myRealClass2 {
   &:extend(.myFakeClass);
}

并按照您的预期输出。

目前的解决方法

Bass Jobsen 提到了这一点，但没有明确说明。在 LESS 1.5 中，你为你的假类构建了一个文件，比如说 fakeClasses.less，对于我们的例子来说，它里面有这个:

.myFakeClass {
  color:#fff;
  background-color:#000;
}

然后在您想要扩展的文件中，比方说 styles.less，您可以这样做:

@import (reference) fakeClasses.less;

.myRealClass {
   &:extend(.myFakeClass);
}

.myRealClass2 {
   &:extend(.myFakeClass);
}

这将导入 fakeClasses.less 类但不会将它们编译为 css(因此它们在 styles.less 的上下文中是“假的”，但是“真实的”因为它们可以扩展到)，您将得到您期望的输出。

.myRealClass, .myRealClass2 {
  color:#fff;
  background-color:#000;
}