How to extend the / mixin class, which has a dynamically generated selector

Question

How to extend the Less class, which is dynamically generated using and combinator?

The minus that generates the expected result:

.hello-world {
  color: red;
}

.foo {
  &:extend(.hello-world);
  font-size: 20px;
}

Expected CSS output:

.hello-world,
.foo {
  color: red;
}
.foo {
  font-size: 20px;
}

Less does not generate the expected result:

.hello {
  &-world {
    color: red;
  }
}

.foo {
  &:extend(.hello-world);
  font-size: 20px;
}

Unexpected CSS output:

.hello-world {
  color: red;
}
.foo {
  font-size: 20px;
}

Answer 1

An extension of a dynamically formed selector (freely using the term), as is currently not possible in Less. To support this, there is an open function request . Until it is implemented, here are two solutions to work with.

Option 1:

.hello .hello-world ( test.less), , CSS. .foo, CSS ( (less)), .hello-world, .

test.less:

.hello {
  &-world {
    color: red;
  }
}

rule.less:

@import (less) "test.css";
.foo {
  &:extend(.hello-world);
  font-size: 20px;
}

CSS:

.hello-world,
.foo {
  color: red;
}
.foo {
  font-size: 20px;
}

, test.css . , .

---

2:

, .hello-world, .foo, :

.dummy{
    color: red;
}
.hello {
  &-world:extend(.dummy) {};
}

.foo:extend(.dummy){
  font-size: 20px;
}

(), .

. , , , , , , .