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

Дам простой пример, чтобы проще было понять.
<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; ?
Нужен максимально короткий вариант.
  • Вопрос задан
  • 127 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега Sass
frontend developer
.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;
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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