css - 伪类选择器相同的值

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