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

Question

[Петр Сергеев]

<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 режет глаз. Хотелось бы избавиться от блока. Но возможно ли это сделать?

Answer 1

[Ankhena]

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

Comments

[Петр Сергеев]

спасибо

[cssfish]

странно у меня такое не компилится, переписал с $ и без точки

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

[Ankhena]

cssfish, ну да, быстро писала и написала немножко не так.
Спасибо, исправила.

Answer 2

[cssfish]

без введения переменной (которая к тому же не избавляет от дублирования __element) так:

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

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

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

Comments

[Петр Сергеев]

Спасибо