How to correctly write scss according to my template?

Question

css

Hello, I've run into a problem.
I have a theme page, here is an example html

<div class='theme-1'>
  <div class='main'>
    <div class='main-child >
      <div class='main-child -img></div>
     </div>
  </div>
</div>

.theme 1 {
  .main {
    &-child {
       &:hover &-img {}  <---- 
    }
 }
}

The problem is that in scss
everything is inherited well until one moment where hover on child to change img


<- it inherits like

this

<element class="theme-1>
<element class="main-child" :hover>
  …
    <element class="main-child-img">

Answer 1

.main {
  $this: &;

  .theme_1 & {
    #{$this}-child:hover #{$this}-img {
    }
 }
}

.main {
  $this: &;

  @at-root {
    .theme_1 {
      #{$this}-child:hover #{$this}-img {
      }
    }
  }
}