SASS & LESS - 扩展一个分离的类

Question

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

示例：

SASS：

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

少：

.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;
}