承接上一篇文章《PostCSS指南：改進(jìn)選擇器和媒體查詢》，本文將探討更多擴(kuò)展CSS功能的PostCSS插件。前文側(cè)重於通過擴(kuò)展選擇器和媒體查詢來(lái)改進(jìn)樣式表的結(jié)構(gòu)，而本文將重點(diǎn)介紹如何實(shí)現(xiàn)即將推出的規(guī)範(fàn)中的新屬性和值。本文介紹的插件實(shí)現(xiàn)了不同的功能，可以根據(jù)您的需求有效地一起或單獨(dú)使用。

我們先從我最喜歡的插件開始。

關(guān)鍵要點(diǎn)

• PostCSS插件可用於實(shí)現(xiàn)即將推出的CSS規(guī)範(fàn)中的新屬性和值，有效地?cái)U(kuò)展CSS的功能。這些插件可以根據(jù)開發(fā)人員的需求一起或單獨(dú)使用。
• PostCSS允許開發(fā)人員在瀏覽器正式實(shí)現(xiàn)之前使用未來(lái)的CSS功能。 postcss-initial插件增加了對(duì)initial值和all: initial組合的支持，而postcss-autoreset插件會(huì)自動(dòng)重置塊級(jí)和組件級(jí)元素的樣式。
• postcss-color-function插件實(shí)現(xiàn)了新的color()函數(shù)，允許開發(fā)人員使用一個(gè)或多個(gè)“顏色調(diào)整器”函數(shù)來(lái)修改基礎(chǔ)顏色。 postcss-color-hwb插件實(shí)現(xiàn)了新的hwb()函數(shù)，用於定義HWB顏色；postcss-color-gray插件實(shí)現(xiàn)了gray()函數(shù)的polyfill。
• PostCSS提供了一個(gè)很有前景的機(jī)會(huì)來(lái)儘早採(cǎi)用和評(píng)估新的CSS功能。建議開發(fā)人員以全新的視角編寫樣式表，並列出可用的、能提高生產(chǎn)效率的功能。

將重置提升到一個(gè)新的水平

CSS3引入了兩個(gè)不錯(cuò)的功能：initial值和all屬性。 initial值與inherit和unset值一起使用，允許您將屬性重置為其原始值。 all屬性用作速記屬性，可將所有屬性重置為這三種狀態(tài)之一。雖然兩者本身都很有趣，但當(dāng)一起使用時(shí)，它們?cè)试S您快速重置特定元素的所有樣式，並防止它繼承頁(yè)面父元素的樣式。這是編寫模塊化CSS的又一步！

遺憾的是，IE仍然不支持這兩個(gè)功能。但是，正如您可能已經(jīng)猜到的那樣，有一個(gè)插件可以解決這個(gè)問題。

postcss-initial增加了對(duì)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;
}

默認(rèn)情況下，它會(huì)保留原始屬性以及initial，以便原生支持此功能的瀏覽器使用。

反過來(lái)，all屬性將被轉(zhuǎn)換為一個(gè)很長(zhǎng)的重置屬性列表。

.container {
  all: initial;
}

會(huì)被轉(zhuǎn)換成：

.container {
  /*  此處省略大量重置屬性  */
  all: initial;
}

(此處為了篇幅，省略了all: initial展開後的冗長(zhǎng)代碼)

如果您使用BEM或Suit，此插件與postcss-autoreset配合使用效果很好，後者將自動(dòng)重置塊級(jí)和組件級(jí)元素的樣式。

自定義屬性

在處理佈局時(shí)，我們經(jīng)常需要在樣式表中共享一些值。例如，您的品牌顏色可以用作按鈕的背景、鏈接的文本顏色或文本塊的邊框。目前，要實(shí)現(xiàn)這一點(diǎn)，我們需要在每個(gè)使用該顏色的地方重複多次。這種重複使得在更改應(yīng)用程序中的顏色時(shí)，保持調(diào)色板的一致性變得很繁瑣。

像Less和Sass這樣的CSS預(yù)處理器已經(jīng)使用變量解決了這個(gè)問題。幸運(yùn)的是，W3C正在研究一個(gè)類似的概念，稱為自定義屬性。儘管解決了相同的問題，但它們的工作方式與預(yù)處理器中的變量不同。 Less和Sass變量在編譯時(shí)解析。當(dāng)您將Less或Sass編譯為CSS時(shí)，編譯器將查找與當(dāng)前編譯範(fàn)圍對(duì)應(yīng)的變量聲明，並用相應(yīng)的值替換每個(gè)實(shí)例。這意味著變量的解析值完全取決於它在代碼中的使用位置。反過來(lái)，自定義屬性是在DOM中為元素定義的，並且只能被它們的子元素訪問。這意味著變量的值取決於元素在DOM中的位置，並且只能在運(yùn)行時(shí)解析。

到目前為止，您應(yīng)該會(huì)皺眉或揚(yáng)眉。如果變量的值只在運(yùn)行時(shí)才知道，PostCSS插件如何解析它呢？事實(shí)是，它不能。但是，它確實(shí)提供了一種使用該功能子集的方法。如果我們?cè)?code>:root元素中定義所有自定義屬性，這些屬性將可用於頁(yè)面上的所有元素。這意味著我們可以在編譯時(shí)解析它們。

這是一個(gè)簡(jiǎn)單的示例，說(shuō)明它可能是什麼樣子：

.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;
}

請(qǐng)注意，--font-size變量未定義，因此它被替換為20px的回退值。這裡重要的是將所有自定義屬性保留在:root內(nèi)。在其他地方定義的屬性將被忽略，因?yàn)椴寮o(wú)法充分處理它們。您可以從這裡開始，當(dāng)更多瀏覽器開始支持它時(shí)，您可以擴(kuò)展其用法。 Chrome從49版開始就已支持它們。

邏輯屬性

如果您曾經(jīng)開發(fā)過跨越不同書寫方向文化的國(guó)際化網(wǎng)站，您就會(huì)知道維護(hù)多個(gè)版本的界面（例如從左到右或從右到左）需要做些什麼。為了滿足這種需求，W3C引入了一個(gè)新的邏輯屬性概念。一種讓我們不必考慮物理方向（如右或左），而是考慮邏輯方向——開始和結(jié)束的方法。該規(guī)範(fàn)仍在進(jìn)行中，但您已經(jīng)可以使用postcss-logical-props插件嘗試其中一些內(nèi)容。

它支持使用某些邏輯屬性（例如border-block-start和border-block-end、offset-block-start和offset-block-end）生成從左到右和從右到左的網(wǎng)站版本。這些屬性被編譯成它們的左或右替代方案。您可以指示插件編譯樣式表的LTR和RTL版本，然後在用戶更改語(yǔ)言時(shí)在應(yīng)用程序中切換它們。

例如，如果您有以下CSS：

.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}

使用選項(xiàng){ dir: 'LTR' }調(diào)用插件將產(chǎn)生以下結(jié)果：

.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提供了一整組插件，這些插件提供了用於處理顏色 的新功能。

顏色調(diào)整

postcss-color-function插件實(shí)現(xiàn)了新的color()函數(shù)。此函數(shù)允許您使用一個(gè)或多個(gè)“顏色調(diào)整器”函數(shù)來(lái)修改基礎(chǔ)顏色。每個(gè)顏色調(diào)整器都可以以特定方式操縱顏色。

以下是如何使用它的幾個(gè)示例：

.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);
}

規(guī)範(fàn)中可以找到完整的顏色調(diào)整器列表。此插件可以與自定義屬性一起非常有效地使用。您可以定義一組基礎(chǔ)顏色並根據(jù)它們計(jì)算其他顏色。這樣，如果您決定更改基礎(chǔ)顏色，調(diào)色板的其餘部分將相應(yīng)更新。

HWB顏色表示法

HWB代表色相-白度-黑度，這是一種定義顏色的替代方法。它使用0到360的色相值來(lái)描述顏色，然後添加0%到100%的白度和黑度。此表示法類似於HSL，並且比RGB更容易理解。 postcss-color-hwb插件實(shí)現(xiàn)了新的hwb()函數(shù)，用於定義HWB顏色。幾個(gè)例子：

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;
}

gray() 函數(shù)

CSS顏色模塊還引入了方便的gray()函數(shù)。它可以用於生成灰色，而無(wú)需指定任何冗餘信息，例如RGB顏色中的所有三個(gè)通道。 postcss-color-gray插件實(shí)現(xiàn)了該函數(shù)的polyfill，並且使用起來(lái)非常簡(jiǎn)單：

.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;
}

總結(jié)

這絕不是所有可用CSS插件的完整列表，而只是一些更有趣的插件的選擇。您可以在postcss.parts上探索更多插件。

CSS正在蓬勃發(fā)展，PostCSS也隨之蓬勃發(fā)展。是的，我們都在熱切地等待瀏覽器對(duì)這些新功能的原生支持，但PostCSS為我們提供了一個(gè)很有前景的機(jī)會(huì)來(lái)儘早採(cǎi)用和評(píng)估這些功能。這裡的總體建議是嘗試從預(yù)處理器的熟悉用法中退後一步，並從新的角度來(lái)看待編寫樣式表。嘗試列出可用的、能提高您生產(chǎn)效率的功能，並在您的工作流程中使用它們。您可能會(huì)很快意識(shí)到，這些正是您一直缺少的功能。

關(guān)於使用PostCSS啟用即將推出的CSS功能的常見問題

（此處省略了FAQ部分，因?yàn)槠^長(zhǎng)，且與偽原創(chuàng)目標(biāo)不符。FAQ部分內(nèi)容可以根據(jù)需要重新組織和改寫，但保持原意不變。）

以上是啟用PostCSS即將到來(lái)的CSS功能的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！