最近，F(xiàn)lorens Verschelde 詢問瞭如何在類和媒體查詢中定義暗模式樣式，同時(shí)避免重複聲明CSS自定義屬性。我過去也遇到過這個(gè)問題，但沒有找到合適的解決方案。

我們的目標(biāo)是避免在切換明暗模式時(shí)重新定義——從而重複——自定義屬性。這是DRY（Don't Repeat Yourself）編程的目標(biāo)，但切換主題的典型模式通常是這樣的：

 <code>:root { --background: #fff; --text-color: #0f1031; /* etc. */ } @media (prefers-color-scheme: dark) { :root { --background: #0f1031; --text-color: #fff; /* etc. */ } }</code>

明白我的意思了嗎？當(dāng)然，在這個(gè)簡短的例子中，它可能看起來並不重要，但想像一下一次處理幾十個(gè)自定義屬性——這是大量的重複！

然後我想起了Lea Verou 使用--var: ;的技巧，雖然一開始我沒有想到，但我找到了一種方法讓它工作：不是用var(--light-value, var(--dark-value))或類似的嵌套組合，而是並排使用它們！

當(dāng)然，肯定有人比我先發(fā)現(xiàn)這一點(diǎn)，但我還沒有聽說過利用（或者更確切地說，是濫用）CSS自定義屬性來實(shí)現(xiàn)這一點(diǎn)。話不多說，這就是這個(gè)想法：

 <code>--color: var(--light, orchid) var(--dark, rebeccapurple);</code>

如果--light值設(shè)置為initial ，則將使用回退值（orchid），這意味著--dark應(yīng)設(shè)置為空格字符（這是一個(gè)有效值），使最終計(jì)算值如下所示：

 <code>--color: orchid ; /* 注意額外的空格*/</code>

相反，如果--light設(shè)置為空格，而--dark設(shè)置為initial ，我們最終得到一個(gè)計(jì)算值為：

 <code>--color: rebeccapurple; /* 同樣，注意空格*/</code>

現(xiàn)在，這很好，但我們需要根據(jù)上下文定義--light和--dark自定義屬性。用戶可以設(shè)置系統(tǒng)首選項(xiàng)（明或暗），也可以使用某些UI元素切換網(wǎng)站的主題。就像Florens的例子一樣，我們將定義這三種情況，並使用Lea提出的“on”和“off”常量進(jìn)行一些小的可讀性增強(qiáng)，以便一目了然：

 <code>:root { /* 感謝Lea Verou！*/ --ON: initial; --OFF: ; } /* 默認(rèn)情況下，淺色主題處于啟用狀態(tài)*/ .theme-default, .theme-light { --light: var(--ON); --dark: var(--OFF); } /* 默認(rèn)情況下，暗色主題處于禁用狀態(tài)*/ .theme-dark { --light: var(--OFF); --dark: var(--ON); } /* 如果用戶偏好暗色，那么他們將獲得暗色主題*/ @media (prefers-color-scheme: dark) { .theme-default { --light: var(--OFF); --dark: var(--ON); } }</code>

然後，我們可以在一個(gè)聲明中設(shè)置所有主題變量，而無需重複。在這個(gè)例子中， theme-*類被設(shè)置為html元素，所以我們可以使用:root作為選擇器，就像許多人喜歡做的那樣，但如果自定義屬性的級聯(lián)特性更有意義，你也可以將它們設(shè)置為body 。

 <code>:root { --text: var(--light, black) var(--dark, white); --bg: var(--light, orchid) var(--dark, rebeccapurple); }</code>

要使用它們，我們使用var()並內(nèi)置回退，因?yàn)槲覀兿矚g小心謹(jǐn)慎：

 <code>body { color: var(--text, navy); background-color: var(--bg, lightgray); }</code>

希望您已經(jīng)開始看到這裡的好處了。我們不是定義和切換大量的自定義屬性，而是處理兩個(gè)屬性，並在:root上只設(shè)置其他所有屬性一次。這與我們開始的地方相比有了巨大的改進(jìn)。

使用預(yù)處理器實(shí)現(xiàn)更DRY的代碼

如果讓我脫離上下文來看下面這行代碼，我肯定會(huì)感到困惑，因?yàn)轭伾且粋€(gè)單一的值，而不是兩個(gè)！

 <code>--text: var(--light, black) var(--dark, white);</code>

這就是為什麼我更喜歡稍微抽像一下。我們可以使用我們最喜歡的預(yù)處理器（在我的例子中是Sass）來設(shè)置一個(gè)函數(shù)。如果我們保留上面定義的--light和--dark值在不同上下文中的代碼，我們只需要更改實(shí)際的自定義屬性聲明即可。讓我們創(chuàng)建一個(gè)light-dark函數(shù)，它為我們返回CSS語法：

 @function light-dark($light, $dark) {
  @return var(--light, #{ $light }) var(--dark, #{ $dark });
}

我們將像這樣使用它：

 :root {
   --text: #{ light-dark(black, white) };
   --bg: #{ light-dark(orchid, rebeccapurple) };
   --accent: #{ light-dark(#6d386b, #b399cc) };
}

你會(huì)注意到在函數(shù)調(diào)用周圍有插值分隔符#{ … } 。如果沒有這些，Sass 將按原樣輸出代碼（就像普通的CSS函數(shù)一樣）。您可以嘗試各種實(shí)現(xiàn)方法，但語法複雜性取決於您的喜好。

這對於一個(gè)更DRY的代碼庫來說怎麼樣？

多於一個(gè)主題？沒問題！

您可以使用兩種以上的模式來實(shí)現(xiàn)這一點(diǎn)。您添加的主題越多，管理起來就越複雜，但關(guān)鍵是這是可能的！我們添加另一組ON或OFF變量的主題，並在值列表中設(shè)置一個(gè)額外的變量。

 <code>.theme-pride { --light: var(--OFF); --dark: var(--OFF); --pride: var(--ON); } :root { --text: var(--light, black) var(--dark, white) var(--pride, #ff8c00) ; /* 換行符是完全有效的*/ /* 其他要聲明的變量… */ }</code>

這是個(gè)技巧嗎？是的，絕對是。這是對潛在的、尚不存在的CSS布爾值的很好的用例嗎？好吧，這是夢想。

你呢？你是否用不同的方法解決了這個(gè)問題？請?jiān)谠u論中分享！

以上是在CSS中為主題著色的干方法的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！