使用 `currentColor` 来保持 CSS DRY 和组件颜色的灵活性

什么是currentColor

currentColor是一个特殊的 CSS 关键字，可用于请求color在其他 CSS 属性中使用的值。

给定以下 CSS：

p {
  color: blue;
  border-color: currentColor;
}

文本颜色和段落边框都将是blue。

如果p是另一个元素的子元素并且没有设置自己的颜色值，border-color则会选择祖先中设置的值。

鉴于以下情况，border-color现在将是red。

article {
  color: red;
}

article p {
  border-color: currentColor;
}

如何currentColor保持 CSS DRY

DRY 是流行编码原则的首字母缩写：不要重复自己。

因此，您无需为每个品牌或主题颜色创建类并重复或覆盖诸如和border-color之类的样式box-shadow，而是可以创建仅设置属性的颜色类color。

使用 Sass，我们可以快速创建 3 个类来代表我们的 3 种品牌颜色：

$theme-colors: (
  "primary": #D73846,
  "secondary": #5D5DDE,
  "tertiary": #19965B
);

@each $key, $value in $theme-colors {
  .ink-#{$key} {
    color: $value;
  }
}

然后，对于打算在子元素中使用主题颜色的每个组件，使用currentColor这些属性的关键字。

示例（使用 简化为相关属性currentColor）：

.card {
  border-color: 1px solid currentColor;

  &:hover {
    box-shadow: 0 0 1px 2px currentColor;

    &:before {
      // Use for background-color
      background-color: currentcolor;
      // Combine with opacity to use as a screen effect
      opacity: 0.08;
    }
  }

  svg {
    // Use currentColor for svg fill
    fill: currentColor;
  }
}

以下 Codepen.card使用以下类之一演示了每张卡片的完整组件.ink-[theme color]：

currentColor提供组件颜色的灵活性

如果不使用，currentColor您通常需要重复上述代码块中的所有样式，以处理所有这些属性的单个品牌/主题值。对于一个三色主题系统，在本例中，编译并压缩后，单独类的 CSS（未使用）currentColor总计约为 520b。在整个综合设计系统中，这会导致最终生产版本减少多达 1000kb，从而提高整体性能。

此外，currentColor这意味着这些组件只需传递一个新的颜色值就可以采用一次性的颜色规则，而.card不必编写另一个整个块来更改每个值。

#special-card {
  color: pink;
}

危险currentColor

使用的缺点currentColor是颜色组合可能无法正确通过对比度准则，从而影响可访问性。Sass 的优势在于能够在组件颜色相关的规则中包含函数来检查对比度是否通过。考虑特定元素或组件的意图和预期用例，将有助于您决定是否使用currentColor更明确的颜色规则。

预测和克服冲突的一种方法是预先声明对比传递样式，特别是对于排版，例如：

.card {
  // Perhaps support is a very light color, like pink
  &.ink-support {
    h3, a {
      color: scale-color(pink, $lightness: -23%);
    }
  }
}