nested selector with scss on active class

Question

Sorry for the title, I don't know how to explain it.

I have an item like this :

<div class="faq__item">
 <div class="faq__item-header"></div>
</div>

When I click on faq__item, I have an active class active

So in my scss, I want to style the header without selecting the whole child selector and keep the ampersand

.faq__item {

 &.active{
  .faq__item-header{ => I would like to avoid this
  }
 }
}

I don't know if I'm clear, I'm pretty sure I can optimise the code, but I don't know what to search

Answer 1

Store the parent selector in a variable and use it like so:

.faq__item {
  $parent: &;
  &.active {
    #{$parent}-header {
      /* rules here */
    }
  }
}