How to hover a parent element so that the child changes in SCSS?

Question

Sass

How to write correctly so that the color of box-1 changes?
https://skr.sh/s5mQNSBqDlD

Answer 1

because & is already different. do like this:

&:hover {
    .main__box-1 {}
}

or save & to a variable

.main {
  $v: &;
  &:hover {
    #{$v}__box-1 {
      background: #000;
    }
  }
}