Как вы описываете класс active элемента в Sass?

Question

[Марс Степанов]

Дам простой пример, чтобы проще было понять.

<div class="menu">
	<div class="menu__item">
		<a class="menu__link" href="/">Главная</a>
		<span class="menu__img"></span>
	</div>
	<div class="menu__item menu__item_active">
		<a class="menu__link" href="/services/">Услуги</a>
		<span class="menu__description">
			Список доступных услуг.
			<span class="menu__img"></span>
		</span>
	</div>
</div>

Прописываем стили. Это пример и не нужно на нём акцентировать внимание, главный вопрос ниже.

.menu {
	position: relative;

	&__item {
		display: block;
		margin-bottom: 5px;
		position: relative;
	}

	&__link {
		display: block;
		font-size: 1rem;
		color: blue;

		&:hover {
			color: red;
		}
	}

	&__img {
		position: absolute;
		width: 10px;
		height: 10px;
		display: none;
	}
}

Вопрос: Как вы опишите класс menu__item_active, чтобы ссылка была красной, а изображение имело display: block; ?
Нужен максимально короткий вариант.

Answer 1

[Сергей delphinpro]

.menu {
  position: relative;

  &__item {
    display: block;
    margin-bottom: 5px;
    position: relative;
  }

  &__link {
    display: block;
    font-size: 1rem;
    color: blue;
  }

  &__img {
    position: absolute;
    width: 10px;
    height: 10px;
    display: none;
  }
  
  //==
  //== Hover & active states
  //== ======================================= ==//
  
  &__link:hover,
  &__link_active {
    color: red;
  }
  
  &__link:hover + &__img,
  &__link_active + &__img {
    display block;
  }
}

Comments

[Марс Степанов]

Несмотря на то, что ответ неверный (нет класса menu__link_active), я понял суть вашего варианта решения.
Единственное, что мне не нравится, это соседние селекторы. Но спасибо за вариант решения.

[Сергей delphinpro]

Марс Степанов, проморгал =)) Еще хотел дополнить, что лучше вешать актив на айтем...
А у вас и так так.

Ну просто меняем на item:

&__link:hover,
&__item_active &__link {
    color: red;
}
  
&__link:hover + &__img, // в это строчке я не уверен какое поведение вам нужно
&__item_active &__img {
    display block;
}