学习CSS：使用 PostCSS 启用即将推出的 CSS 功能

之前关于PostCSS的文章侧重于通过扩展选择器和媒体查询来改进样式表的结构。这个将专注于从即将到来的规范中实现新的属性和值。本文中介绍的插件实现了不同的功能，可以根据您的需要有效地一起或单独使用。

我们将从我个人最喜欢的开始。

将重置提升到一个新的水平

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 {
  animation: none 0s ease 0s 1 normal none running;
  backface-visibility: visible;
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  border: medium none currentColor;
  border-collapse: separate;
  border-image: none;
  border-radius: 0;
  border-spacing: 0;
  bottom: auto;
  box-shadow: none;
  box-sizing: content-box;
  caption-side: top;
  clear: none;
  clip: auto;
  color: #000;
  columns: auto;
  column-count: auto;
  column-fill: balance;
  column-gap: normal;
  column-rule: medium none currentColor;
  column-span: 1;
  column-width: auto;
  content: normal;
  counter-increment: none;
  counter-reset: none;
  cursor: auto;
  direction: ltr;
  display: inline;
  empty-cells: show;
  float: none;
  font-family: serif;
  font-size: medium;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-stretch: normal;
  line-height: normal;
  height: auto;
  hyphens: none;
  left: auto;
  letter-spacing: normal;
  list-style: disc outside none;
  margin: 0;
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
  opacity: 1;
  orphans: 2;
  outline: medium none invert;
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
  padding: 0;
  page-break-after: auto;
  page-break-before: auto;
  page-break-inside: auto;
  perspective: none;
  perspective-origin: 50% 50%;
  position: static;
  right: auto;
  tab-size: 8;
  table-layout: auto;
  text-align: left;
  text-align-last: auto;
  text-decoration: none;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  top: auto;
  transform: none;
  transform-origin: 50% 50% 0;
  transform-style: flat;
  transition: none 0s ease 0s;
  unicode-bidi: normal;
  vertical-align: baseline;
  visibility: visible;
  white-space: normal;
  widows: 2;
  width: auto;
  word-spacing: normal;
  z-index: auto;
  all: initial;
}

如果你使用 BEM 或 Suit，这个插件可以很好地与postcss-autoreset 配合使用，它会自动重置块和组件级元素的样式。

自定义属性

在处理布局时，我们经常需要在整个样式表中共享一些值。例如，您的品牌颜色可能用作按钮的背景、链接的文本颜色或文本块的边框。目前要实现这一点，我们需要在每个使用它的地方多次重复颜色。这种重复使得在整个应用程序中更改颜色时保持调色板一致变得乏味。

CSS 预处理器如 Less 和 Sass 已经使用变量解决了这个问题。幸运的是，W3C 正在研究一个类似的概念，称为自定义属性. 尽管解决了相同的问题，但它们的工作方式与预处理器中的变量不同。Less 和 Sass 变量在编译时解析。当您将 Less 或 Sass 编译为 CSS 时，编译器会查找与当前编译范围对应的变量声明，并将每个实例替换为相应的值。这意味着，变量的解析值仅取决于它在代码中的使用位置。反过来，自定义属性是为 DOM 中的元素定义的，并且只能被它们的子元素访问。这意味着变量的值取决于元素在 DOM 中的位置，并且只能在运行时解析。

此时，您应该皱眉或扬起眉毛。如果一个变量的值只在运行时才知道，那么 PostCSS 插件如何解析它？事实是，它不能。但是，它确实提供了一种使用该功能子集的方法。如果我们在:root元素中定义所有自定义属性，页面上的所有元素都可以访问这些属性。这意味着，我们可以在编译时解析它们。

这是一个简单的示例，说明它的外观：

:root {
    --text-color: red;
    --background: blue;
  }
 
  h1 {
    color: var(--text-color);
    font-size: var(--font-size, 20px);
  }
  button {
    background-color: var(--background);
  }

会编译成：

h1 {
    color: red;
    font-size: 20px;
  }
  button {
    background-color: blue;
  }

请注意，该--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：

.text {
    border-block-start: 1px solid blue;
    text-align: start;
    padding-block-end: 10px;
    margin-block-start: 20px;
}

使用选项调用插件{ dir: 'LTR' }将产生以下结果：

.text {
    border-left: 1px solid blue;
    text-align: left;
    padding-right: 10px;
    margin-left: 20px;
}

使用时{ dir: 'RTL' }会给你一个镜像：

.text {
    border-right: 1px solid blue;
    text-align: right;
    padding-left: 10px;
    margin-right: 20px;
}

新的颜色功能

PostCSS 提供了一整套插件，这些插件提供了处理颜色的新功能。

色彩调整

该postcss色功能的插件实现新的color()功能。此功能允许您使用一个或多个“颜色调整器”功能修改基色。每个颜色调节器都可以以特定方式操纵颜色。

以下是一些如何使用它的示例：

body {
  color: color(red green(50));
  color: color(red blue(50) a(50%));
  color: color(red tint(50%));
  color: color(red shade(50%));
}

会编译成以下颜色

body {
    color: rgb(255, 50, 0);
    color: rgba(255, 0, 50, 0.5);
    color: rgb(255, 128, 128);
    color: rgb(128, 0, 0);
}

可以在规范中找到完整的色彩调节器列表。该插件与自定义属性一起使用时非常有效。您可以定义一组基色并根据它们计算其他颜色。这样，如果您决定更改基色，调色板的其余部分将相应更新。

HWB 颜色符号

HWB 代表 Hue-Whiteness-Blackness，一种定义颜色的替代方法。它使用从 0 到 360 的色调值描述颜色，然后添加从 0% 到 100% 的白度和黑度。这种表示法类似于 HSL，比 RGB 更容易理解。所述postcss色-HWB插件实现的新的hwb()，其被用于定义HWB颜色的功能。几个例子：

body {
  color: hwb(0, 0%, 0%);
  color: hwb(120, 40%, 20%);
  color: hwb(240, 0%, 100%, 0.5);}

将生成以下颜色：

body {
  color: rgb(255, 0, 0);
  color: rgb(102, 204, 102);
  color: rgba(0, 0, 0, 0.5);}

Gray() 功能

CSS 颜色模块还引入了一个方便的gray()功能。它可用于生成灰色，而无需指定任何冗余信息，例如 RGB 颜色中的所有三个通道。所述postcss色灰色插件实现为功能的填充工具，是非常简单的，以使用：

body {
  color: gray(0);
  color: gray(25);
  color: gray(50%);
  color: gray(128, 20%);}

上面的代码将生成不同的灰色阴影：

body {
  color: rgb(0, 0, 0);
  color: rgb(25, 25, 25);
  color: rgb(127, 127, 127);
  color: rgba(128, 128, 128, 0.2);}

把它全部包起来

这绝不是可用的 CSS 插件的完整列表，而是一些更有趣的选择。你可以在postcss.parts探索更多。

CSS 正在蓬勃发展，PostCSS 也随之蓬勃发展。是的，我们都在急切地等待原生浏览器对这些新功能的支持，但是 PostCSS 给了我们一个很好的机会来尽早采用和评估这些功能。这里的一般建议是尝试从熟悉的预处理器用法退后一步，以全新的视角编写样式表。尝试提出一个可用功能列表，以提高您的工作效率并在您的工作流程中使用它们。您可能很快就会意识到这些正是您一直缺少的功能。