伪类选择器的值相同

Question

我正在为我的悬停和活动类使用伪选择器。在这种情况下，悬停和活动状态的颜色相同。这样做的方式是这样的：

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

但是我不想重复相同的属性，我正在寻找类似的东西，虽然这当然行不通，但是您知道我想要做什么。怎么做才是正确的方法？我应该只使用mixin吗？

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;
}