第一个CSS变量：currentColor

CSS variables are slowly making their way from initial draft to browser implementation. But one variable has existed in the specification for years: currentColor. This CSS feature has good browser support and some practical applications, so now is an excellent opportunity to learn how to use it.

从最初的草稿到浏览器的实现，CSS变量正在慢慢发展。 但是多年来规范中已经存在一个变量： currentColor 。 此CSS功能具有良好的浏览器支持和一些实际应用程序，因此现在是学习如何使用它的绝好机会。

继承规则 (An Inherited Rule)

One of the lesser-known features of CSS is that if you set color in a declaration together with the border without a specified color, the border will inherit the text color by default. I’ll use an HSL color, as an example:

其中的鲜为人知的功能CSS是，如果你设置color在声明连同border 没有指定颜色，边框将继承默认的文本颜色。 我将使用HSL color作为示例：

h1 { 
	color: hsl(0,0%,44%);
	padding: 1rem;
	border-bottom: 4px solid; 
}

The result:

结果：

NIGHTFALL

黄昏

That’s a pretty neat trick: if you change the color for the heading, the border-color will automatically alter itself to match. The same is also true for outline and box-shadow.

这是一个非常巧妙的技巧：如果更改标题的color ，则border-color将自动更改以匹配。 outline和box-shadow也是如此。

By using currentColor, we can extend that feature to child elements.

通过使用currentColor ，我们可以将该功能扩展到子元素。

currentColor的实际示例 ( A Practical Example of currentColor)

We’re well past blue links on web pages. Over the last decade it’s become common practice to set links to the same color as the text they are in. Of course, we still need to make clear that the links are still links. One of my favorite techniques is the following:

我们已经远远超过了网页上的蓝色链接 。 在过去的十年中，将链接设置为与它们所处的文本相同的颜色已成为一种常见的做法。当然，我们仍然需要弄清楚链接仍然是链接。 我最喜欢的技术之一是：

p { 
	color: #333; 
}
p a {
	text-decoration: none; color: #333;
	font-weight: bolder;
	display: inline-block;
	padding-bottom: .5rem;
	border-bottom: 1px dashed #333;
}

While this works, I think you can see the problem: we’re saying that links should be the same color as the surrounding text, while also using that color on their bottom border. That’s a repetition of the same color value three times: any design change would mean laboriously going through our stylesheet and altering each one.

在这种情况下，我认为您可以看到问题所在：我们说的链接应该与周围的文本具有相同的颜色，同时在其底部边框上使用该颜色。 这是相同颜色值的重复3次 ：任何设计更改都将意味着费力地遍历我们的样式表并更改每个样式表。

Instead, let’s do the following: define the text color just once, and let the other properties in the link inherit it via currentColor

相反，让我们执行以下操作：仅定义一次文本颜色 ，然后让链接中的其他属性通过currentColor继承它。

p { 
	color: #333; 
}
p a {
	text-decoration: none;
	color: currentcolor;
	font-weight: bolder;
	display: inline-block;
	padding-bottom: .5rem;
	border-bottom: 1px dashed currentcolor;
}

There are absolutely ways to accomplish this without using currentColor (mostly by using inherit), but doing something like the following is impossible without it:

绝对有一些方法可以不使用currentColor来完成此操作(大多数情况下是通过使用inherit )，但是如果没有它，则无法执行以下操作：

body { 
	color: #f0f; 
}
hr {
	height: 10px;
	background: currentcolor;
}

You can use currentColor in all kinds of unexpected places, such as gradients and SVG. For example, to make inline SVG sprites to display more like icon fonts, you can use:

您可以在各种意外的地方使用currentColor ，例如渐变和SVG 。 例如，要使内联SVG精灵显示得更像图标字体 ，可以使用：

svg {
	fill: currentcolor; 
}

This way, every SVG icon will take the font color of its parent element.

这样，每个SVG图标将采用其父元素的字体颜色。

What would be really great is if we could say something like color: (currentcolor) 10% lighter; but manipulations like that aren’t yet possible in standard CSS: they remain the domain of preprocessors, at least for now.

如果我们可以说color: (currentcolor) 10% lighter;这样的话，那将是真正伟大的color: (currentcolor) 10% lighter; 但是在标准CSS中尚无法进行这样的处理 ：至少到目前为止，它们仍是预处理器的领域。

支持 (Support)

Support for currentColor is surprisingly good: all modern browsers and their mobile equivalents, including IE 9+, support the keyword. Occasional browser rendering problems have been reported in Mobile Safari: as always, it’s important to test as you develop, not just as your work draws to a close.

对currentColor支持非常好：所有现代浏览器及其等效的移动设备(包括IE 9+)都支持关键字。 Mobile Safari中报告了偶尔出现的浏览器渲染问题：与往常一样，在开发过程中进行测试很重要，而不仅仅是工作即将完成。

结论 (Conclusion)

Using currentColor in your styleheets is an excellent way to reinforce best DRY CSS practices, reinforce design cohesiveness, and prepare yourself for migration into pre-processors. In the future of the web – reflected in articles in this blog – variables will play a much greater role in front-end design and development.

在样式表中使用currentColor是增强DRY CSS最佳实践，增强设计凝聚力以及为迁移到预处理程序做准备的绝佳方法。 在Web的未来中(在此博客的文章中有所反映)，变量将在前端设计和开发中发挥更大的作用。

翻译自: https://thenewcode.com/908/The-First-CSS-Variable-currentColor