SASS＆amp;少 - 扩展分离的类

Question

只是想知道是否有任何方法可以扩展前两个分离的类，例如在示例中，或者存在任何其他选项，如创建特定的类 .background{background:red}并将其用作扩展而不是分隔的类（但我不想在CSS中输出类.background）。

实施例：

SASS：

.foo {
  background:red
}
.foo {
  color:red
}
.bar {
  @extend .foo;
}
.foo {
  font-size: 16px
}

LESS：

.foo {
  background:red
}
.foo {
  color:red
}
.bar {
  &:extend(.foo);
}
.foo {
  font-size: 16px
}

CSS 中的输出将为：

.foo, .bar {
  background: red;
}

.foo, .bar {
  color: red;
}

.foo, .bar {
  font-size: 16px;
}

但我希望如此：

.foo, .bar {
  background: red;
}

.foo, .bar {
  color: red;
}

// No .bar class here

.foo {
  font-size: 16px;
}

我应该采取什么方式来实现这一目标？

Answer 1

你已经得到了你的继承权。 bar不延伸foo，foo延伸bar：

<子> LESS：

.bar {
  background-color: red;
}

.bar {
  color: red;
}

.foo {
  &:extend(.bar);
  font-size: 16px;
}

可生产

<子> CSS：

.bar,
.foo {
  background-color: red;
}
.bar,
.foo {
  color: red;
}
.foo {
  font-size: 16px;
}