SASS & LESS - 扩展一个分隔的 Class

Question

只是想知道是否有任何方法可以像示例中那样扩展分隔 Class 的前两个，或者是否存在任何其他选项，例如创建特定的 Class .background{background:red} 并将其用作扩展名而不是单独的 Class （但我不想在 CSS 中输出 class .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:

_少：

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

SASS & LESS - extending a separated Class