Extend nested Selectors/Rules to the parent Selector

Question

I try to write my CSS into Less. I know about the extend-feature , but I think, it's not exactly what I'm looking for.

THE Less:

nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

THE CSS Output:

nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

What I'm looking for:

My CSS:

.nav ul {
    color: red;
    background: blue;
}
.nav ul .inline {
    color: red;
}

My Less

.nav ul {
    background: blue;
    color: red;
    .inline {
        color: red;
    }
}

Is there a sensible way to omit the first color: red; attribute?

Answer 1

You can make use of the parent selector and nesting like in the below snippet:

.nav ul {
    background: blue;
    &, .inline {
        color: red;
    }
}

This when compiled would produce the below CSS which is equivalent to your required output.

.nav ul {
  background: blue;
}
.nav ul,
.nav ul .inline {
  color: red;
}