css - 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:

_减少:

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