CODEWITHSUNDEEP
cssless
seebiscuit
seebiscuit

Reputation: 5063

Using the "&" (ampersand) operator where the top-most parent is an element tag selector

I have this LESS:

LESS
custom-component {
  .random-class {
    .decorator-class& wrapper {
      ...
    }
  }

that yields

CSS
.decorator-classcustom-component .random-class wrapper {
  ...
}

which outputs gibberish because there is no such class .decorator-classcustom-component. This happens because the uppermost parent selector is an HTML element tag and not a class or other selector type.

Is there a way to get the characters before the ampersand (.decorator-class) to concatenate on the right side of the uppermost parent selector? Like this:

custom-component.decorator-class .random-class wrapper

?

Note that attempting,

custom-component {
  .random-class {
    &.decorator-class wrapper {
//  ^ ampersand at the beginning of selector
      ...
    }
  }

would yield,

custom-component .random-class.decorator-class wrapper

Upvotes: 0

Views: 1399

Answers (1)

Ben Hull
Ben Hull

Reputation: 7673

I find it really useful to translate CSS selectors to English for debugging in situations like this. Your desired selector custom-component.decorator-class .random-class wrapper translates to:

Select wrapper elements inside an element with a class random-class, inside a custom-component element with the class .decorator-class.

If that's what you mean, then you need something like this:

custom-component {
  &.decorator-class {
    .random-class wrapper {
      ...
    }
  }

Upvotes: 1

Related Questions