What is the correct way to write this in SCSS?

Question

Sass

<div class="parent">
  <div class="parent__child">
    parent
  </div>
</div>
<div class="parent parent--custom">
  <div class="parent__child">
    parent custom
  </div>
</div>

.parent {

}

.parent__child {
  background: gray;
}

@media (max-width: 777px) {
  .parent__child {
    background: orange;
  }

  .parent--custom .parent__child {
    background: red;
  }
}

Answer 1

You can leave it as is.
Can be rewritten like this:

.parent__child {
  background: gray;
  @media (max-width: 777px) {
    background: orange;
    
    .parent--custom & {
    background: red;
  }
 }
}

it is possible like this:

.parent__child {
  background: gray;
  @media (max-width: 777px) {
    background: orange;
  }

  .parent--custom & {
    @media (max-width: 777px) {
      background: red;
    }
  }
}

And it's really good like this :

.parent__child {
  --color: gray;
  background: var(--color);
  @media (max-width: 777px) {
    --color: orange;
  }

  .parent--custom & {
    @media (max-width: 777px) {
      --color: red;
    }
  }
}