@223606322
начинающий web-разработчик

Можно ли здесь избавиться от блока?

<div class="block">
 <div class="block__element">
   <div class="block__element-sub">
   <p>какой-то текст<p>
 </div>
 </div>
</div>


.block {
 &__element:hover {
  .block__element-sub {
   color: red;
  }
 }
}


block__element-sub внутри &__element:hover режет глаз. Хотелось бы избавиться от блока. Но возможно ли это сделать?
  • Вопрос задан
  • 32 просмотра
Решения вопроса 2
Ankhena
@Ankhena
Нежно люблю верстку
.block {
  $this: &;
  &__element:hover {
  #{$this}__element-sub {
    color: red;
  }
 }
}
Ответ написан
@cssfish
Плохое знание основ - причина больших бед
без введения переменной (которая к тому же не избавляет от дублирования __element) так:

.block {
	&__element {
		&:hover &-sub {
			color: red;
		}
	}
}


но лучше block__element-sub от block__element не наследовать, если вы их считаете за разные элементы, а не вложенные. т.е. максимально читабельно так:

.block {
	&__element:hover &__element-sub {
		color: red;
	}
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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