承接上一篇文章《PostCSS指南：改进选择器和媒体查询》，本文将探讨更多扩展CSS功能的PostCSS插件。前文侧重于通过扩展选择器和媒体查询来改进样式表的结构，而本文将重点介绍如何实现即将推出的规范中的新属性和值。本文介绍的插件实现了不同的功能，可以根据您的需求有效地一起或单独使用。
我们先从我最喜欢的插件开始。
postcss-initial插件增加了对initial值和all: initial组合的支持，而postcss-autoreset插件会自动重置块级和组件级元素的样式。postcss-color-function插件实现了新的color()函数，允许开发人员使用一个或多个“颜色调整器”函数来修改基础颜色。postcss-color-hwb插件实现了新的hwb()函数，用于定义HWB颜色；postcss-color-gray插件实现了gray()函数的polyfill。CSS3引入了两个不错的功能：initial值和all属性。initial值与inherit和unset值一起使用，允许您将属性重置为其原始值。all属性用作速记属性，可将所有属性重置为这三种状态之一。虽然两者本身都很有趣，但当一起使用时，它们允许您快速重置特定元素的所有样式，并防止它继承页面父元素的样式。这是编写模块化CSS的又一步！
遗憾的是，IE仍然不支持这两个功能。但是，正如您可能已经猜到的那样，有一个插件可以解决这个问题。
postcss-initial增加了对initial值和all: initial组合的支持。以下是它的工作原理：
.article {
font-size: initial;
color: initial;
padding: initial;
margin: initial;
}编译成：
.article {
font-size: medium;
font-size: initial;
color: #000;
color: initial;
padding: 0;
padding: initial;
margin: 0;
margin: initial;
}默认情况下，它会保留原始属性以及initial，以便原生支持此功能的浏览器使用。
反过来，all属性将被转换为一个很长的重置属性列表。
.container {
all: initial;
}会被转换成：
.container {
/* 此处省略大量重置属性 */
all: initial;
}(此处为了篇幅，省略了all: initial展开后的冗长代码)
如果您使用BEM或Suit，此插件与postcss-autoreset配合使用效果很好，后者将自动重置块级和组件级元素的样式。
在处理布局时，我们经常需要在样式表中共享一些值。例如，您的品牌颜色可以用作按钮的背景、链接的文本颜色或文本块的边框。目前，要实现这一点，我们需要在每个使用该颜色的地方重复多次。这种重复使得在更改应用程序中的颜色时，保持调色板的一致性变得很繁琐。
像Less和Sass这样的CSS预处理器已经使用变量解决了这个问题。幸运的是，W3C正在研究一个类似的概念，称为自定义属性。尽管解决了相同的问题，但它们的工作方式与预处理器中的变量不同。Less和Sass变量在编译时解析。当您将Less或Sass编译为CSS时，编译器将查找与当前编译范围对应的变量声明，并用相应的值替换每个实例。这意味着变量的解析值完全取决于它在代码中的使用位置。反过来，自定义属性是在DOM中为元素定义的，并且只能被它们的子元素访问。这意味着变量的值取决于元素在DOM中的位置，并且只能在运行时解析。
到目前为止，您应该会皱眉或扬眉。如果变量的值只在运行时才知道，PostCSS插件如何解析它呢？事实是，它不能。但是，它确实提供了一种使用该功能子集的方法。如果我们在:root元素中定义所有自定义属性，这些属性将可用于页面上的所有元素。这意味着我们可以在编译时解析它们。
这是一个简单的示例，说明它可能是什么样子：
.article {
font-size: initial;
color: initial;
padding: initial;
margin: initial;
}将编译成：
.article {
font-size: medium;
font-size: initial;
color: #000;
color: initial;
padding: 0;
padding: initial;
margin: 0;
margin: initial;
}请注意，--font-size变量未定义，因此它被替换为20px的回退值。这里重要的是将所有自定义属性保留在:root内。在其他地方定义的属性将被忽略，因为插件无法充分处理它们。您可以从这里开始，当更多浏览器开始支持它时，您可以扩展其用法。Chrome从49版开始就已支持它们。
如果您曾经开发过跨越不同书写方向文化的国际化网站，您就会知道维护多个版本的界面（例如从左到右或从右到左）需要做些什么。为了满足这种需求，W3C引入了一个新的逻辑属性概念。一种让我们不必考虑物理方向（如右或左），而是考虑逻辑方向——开始和结束的方法。该规范仍在进行中，但您已经可以使用postcss-logical-props插件尝试其中一些内容。
它支持使用某些逻辑属性（例如border-block-start和border-block-end、offset-block-start和offset-block-end）生成从左到右和从右到左的网站版本。这些属性被编译成它们的左或右替代方案。您可以指示插件编译样式表的LTR和RTL版本，然后在用户更改语言时在应用程序中切换它们。
例如，如果您有以下CSS：
.article {
font-size: initial;
color: initial;
padding: initial;
margin: initial;
}使用选项{ dir: 'LTR' }调用插件将产生以下结果：
.article {
font-size: medium;
font-size: initial;
color: #000;
color: initial;
padding: 0;
padding: initial;
margin: 0;
margin: initial;
}而使用{ dir: 'RTL' }将为您提供镜像图像：
.container {
all: initial;
}PostCSS提供了一整组插件，这些插件提供了用于处理颜色 的新功能。
postcss-color-function插件实现了新的color()函数。此函数允许您使用一个或多个“颜色调整器”函数来修改基础颜色。每个颜色调整器都可以以特定方式操纵颜色。
以下是如何使用它的几个示例：
.container {
/* 此处省略大量重置属性 */
all: initial;
}将编译成以下颜色：
:root {
--text-color: red;
--background: blue;
}
h1 {
color: var(--text-color);
font-size: var(--font-size, 20px);
}
button {
background-color: var(--background);
}规范中可以找到完整的颜色调整器列表。此插件可以与自定义属性一起非常有效地使用。您可以定义一组基础颜色并根据它们计算其他颜色。这样，如果您决定更改基础颜色，调色板的其余部分将相应更新。
HWB代表色相-白度-黑度，这是一种定义颜色的替代方法。它使用0到360的色相值来描述颜色，然后添加0%到100%的白度和黑度。此表示法类似于HSL，并且比RGB更容易理解。postcss-color-hwb插件实现了新的hwb()函数，用于定义HWB颜色。几个例子：
h1 {
color: red;
font-size: 20px;
}
button {
background-color: blue;
}将生成以下颜色：
.text {
border-block-start: 1px solid blue;
text-align: start;
padding-block-end: 10px;
margin-block-start: 20px;
}CSS颜色模块还引入了方便的gray()函数。它可以用于生成灰色，而无需指定任何冗余信息，例如RGB颜色中的所有三个通道。postcss-color-gray插件实现了该函数的polyfill，并且使用起来非常简单：
.text {
border-left: 1px solid blue;
text-align: left;
padding-right: 10px;
margin-left: 20px;
}上面的代码将生成不同深浅的灰色：
.text {
border-right: 1px solid blue;
text-align: right;
padding-left: 10px;
margin-right: 20px;
}这绝不是所有可用CSS插件的完整列表，而只是一些更有趣的插件的选择。您可以在postcss.parts上探索更多插件。
CSS正在蓬勃发展，PostCSS也随之蓬勃发展。是的，我们都在热切地等待浏览器对这些新功能的原生支持，但PostCSS为我们提供了一个很有前景的机会来尽早采用和评估这些功能。这里的总体建议是尝试从预处理器的熟悉用法中退后一步，并从新的角度来看待编写样式表。尝试列出可用的、能提高您生产效率的功能，并在您的工作流程中使用它们。您可能会很快意识到，这些正是您一直缺少的功能。
（此处省略了FAQ部分，因为篇幅过长，且与伪原创目标不符。FAQ部分内容可以根据需要重新组织和改写，但保持原意不变。）
以上是启用PostCSS即将到来的CSS功能的详细内容。更多信息请关注PHP中文网其他相关文章！
