SASS & LESS - extending a separated Class

Question

Just wanted to know if there exist any way to extend just first two of separated Class like in example, or either exist any other option like creating a specific Class .background{background:red} and use it as extension instead of a separated Class (but i don't wanted to output in CSS a class .background).

EXAMPLES:

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
}

The output in CSS will be:

.foo, .bar {
  background: red;
}

.foo, .bar {
  color: red;
}

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

But I want to be like this:

.foo, .bar {
  background: red;
}

.foo, .bar {
  color: red;
}

// No .bar class here

.foo {
  font-size: 16px;
}

What way should i follow to make this happened?

Answer 1

You've got your inheritance backwards. bar does not extend foo, foo extends bar:

_LESS:

.bar {
  background-color: red;
}

.bar {
  color: red;
}

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

Produces

_CSS:

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