Селекторы псевдо-классов с одинаковыми значениями

Question

Я использую псевдо-селекторы для моего наведения и активных классов.В этом случае цвет для парения и активного цвета совпадает.Способ сделать это будет выглядеть так:

a {
  color: #0090B2;
  &:hover {
    color: #FF7A00;
  }
  &.active {
    color: #FF7A00;
  }
}

, но я бы не хотел повторять одни и те же атрибуты, я ищу что-то подобное, конечно, это не работает, но вы получаетеИдея, что я хочу сделать.Как бы правильно сделать это?Должен ли я просто использовать миксин?

a {
  color: #0090B2;
  &:hover, &.active {
    color: #FF7A00;
  }
}

Answer 1

Вариант 1

Я не понимаю, что с тобой не так, это работа для меня:

a {
  color: #0090B2;
  &:hover, &.active {
    color: #FF7A00;
  }
}

Что даст тебе:

a {
  color: #00acc1;
}
a:hover, a.active {
  color: #0f9d58;
}

Вариант 2

a {
  color : #00acc1;;

  &:hover {
    @extend %active_link;
  }

  &.active {
    @extend %active_link;
  }
}

%active_link {
  color: #0f9d58;
}

Те же результаты, что и раньше.Но здесь вы можете сделать что-то вроде:

a {
  color : #00acc1;;

  &:hover {
    @extend %active_link;
    content: "AAA";
  }

  &.active {
    @extend %active_link;
    content: "BBB";
  }
}

%active_link {
  color: #0f9d58;
}

и получить:

a {
  color: #00acc1;
}
a:hover {
  content: "AAA";
}
a.active {
  content: "BBB";
}

a:hover, a.active {
  color: #0f9d58;
}