获取不同状态的默认状态颜色（currentColor），例如悬停

Question

是否有像currentcolor 这样的关键字可以让我们在默认状态下获取类的颜色？

例如，我正在尝试创建可重复使用的按钮样式，而在我尝试创建 :hovered 状态之前，currentcolor 关键字有很大帮助。

.outline-btn {
  background-color: transparent;
  border: 1px solid currentColor;
  padding: 0.5em 1.5em;
}

.rounded-btn {
  border-radius: 50px;
}

默认状态看起来是我们想要的方式，更改 color 或 font-size 也会调整其余属性。

但我们希望 :hovered 状态反转颜色（在本例中为白色文本和橙色背景）

.outline-btn:hover, .outline-btn:active, .outline-btn:focus {
  background-color: currentcolor;
  color: white;
}

但由于在这种状态下color 变为白色，其他所有内容也变为白色。

有没有一种方法可以实现我们想要的行为，而无需为我们想要的不同按钮样式创建多个类？

悬停效果：

另外我忘了提到我正在使用SCSS，如果有帮助的话。

感谢您的宝贵时间 :)

Answer 1

如果您考虑一下，您实际上是希望 currentColor 充当一个变量——以保持一个恒定值。即将推出的 CSS variables 将对此有所帮助，但在它们得到更好的支持之前，我们有 Sass 变量。

通过将颜色定义为变量，您可以非常详细而具体地写出它们，但只需要在需要时在一处更改颜色。

$btn-color: red;
$btn-bg: transparent;

.outline-btn {
  background-color: $btn-bg;
  border: 1px solid $btn-color;
  padding: 0.5em 1.5em;
  color: $btn-outline-color;

  &:hover,
  &:active,
  &:focus {
    background-color: $btn-outline-color;
    color: $btn-outline-bg;
  }
}

您可以更进一步，将这些变量设置为与之前设置的用于 body/html 颜色背景的变量相同，例如 $bg-bg: $body-bg; $btn-color: $text-color;。我也喜欢currentColor，虽然没有那么干净，但在这种情况下可能更合适。

然后您可以按照 user6292372 的说明将其构建为 mixin。比如：

@mixin buttonBuilder($color, $bg) {
  background-color: $bg;
  border: 1px solid $color;
  color: $color;

  &:hover {
    background-color: $color;
    color: $bg;  
  }
}

...

.outline-btn {
  @include button-builder($btn-color, $btn-bg);
}

然后您可以轻松地制作多个变体。

Answer 2

这不能仅使用 css 完成

如果你使用像 SCSS 或 Less 这样的辅助函数，你可以让自己成为一个 mixin，你只插入你想要的颜色作为参数。

但是你仍然需要创建几个类（只要你需要不同的颜色），但可以像这样重用你的 mixin（scss 示例）：

@mixin invertHover($color) {
  background-color: transparent;
  border: 1px solid $color;
  color: transparent;

  &:hover {
    background-color: $color;
    border: 1px solid transparent;
    color: $color;  
  }
}

.blue-box { @include invertHover('blue'); }
.black-box { @include invertHover('#000000'); }