4

Is there any way I can use the immediate child selector without having to do it inside the mixin to get the desired result? The real mixin is actually large and I want to be able to reuse it also without having to pollute it with child selectors.

Desired Result

.wrapper > .col-xs-6 {
  width: 50%;
}

Code I have

.wrapper {
    > .mixintest(); //not allowed
}


.mixintest(){
  .col-xs-6{
    width: 50%;
  }
}
rory
  • 1,490
  • 3
  • 22
  • 50

1 Answers1

1

move immediate child selector to mixin

.wrapper {
    .mixintest();
}


.mixintest() {
  > .col-xs-6 {
    width: 50%;
  }
}

That is the only way that will work according to https://lesscss.org/features/#mixins-feature more specifically this example in "Namespace" subsection

#outer > .inner(); // deprecated
#outer .inner();   // deprecated
#outer.inner();    // preferred
ciekals11
  • 2,032
  • 1
  • 10
  • 24
  • You can remove the parent selector `&`, and the second part of your answer is related to namespaces, not mixins directly. – Altareos Jun 23 '21 at 13:43
  • using parent selector is "my way" of writing so I guess I should specify it but the second part is about namespaces in mixins as well. quote: "Note: legacy Less syntax allows > and whitespace between namespaces and ***mixins***. This syntax is deprecated and may be removed. Currently, these do the same thing." – ciekals11 Jun 23 '21 at 13:46
  • This is about accessing mixins that are located in namespaces, not about using the child combinator in a CSS-like way – Altareos Jun 23 '21 at 14:56