Как это правильно записать в SCSS?

Question

[SuperToster]

<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

[Ankhena]

Можно оставить как есть.

Можно переписать так:

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

можно так:

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

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

А совсем хорошо вот так:

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

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

Comments

[Сергей delphinpro]

.parent {

  &__child {
    background: gray;
  }

  @media (max-width: 777px) {
    &__child {
      background: orange;
    }
  }

  //==
  //== Custom style
  //== =======================

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

[Ankhena]

Сергей delphinpro, угу
У нас по кодгайду запрещено использовать & для элементов.
Для модификаторов, состояний, псевдоэлементов - можно.
И мне это нравится.