SuperToster
@SuperToster

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

<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;
	}
}
  • Вопрос задан
  • 65 просмотров
Решения вопроса 1
Ankhena
@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;
    }
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы