轉https://www.h5jun.com/post/autoprefixing-with-css-variables-lea-verou.html

最近，當我在制作 markapp.io 這個小網站的時候，我想出一個巧妙的技巧用在 CSS 變量上，我們可以天然地使用它們的動態本質。讓我們看一下當你想使用一個屬性，但是這個屬性有不同的版本，一個無前綴的標準版和一個或多個有前綴的版本的情形。在這裏我舉一個例子，比如我們使用clip-path，目前需要同時使用無前綴的版本和一個-webkit-前綴的版本，我的這個方法可以適用於這種情況，不管這個 CSS 屬性是什麽，有多少種前綴，只要它不論什麽前綴的值都是同樣的就可以。

第一步是在所有元素上定義一個 --clip-path 屬性，值是 initial。這樣阻止這個屬性在每一次使用的時候被繼承，而由於 * 沒有特異性，任何使用了 --clip-path 的聲明都能被覆蓋。然後你定義所有不同版本的屬性名，值為 var(--clip-path)：

* {
  --clip-path: initial;
  -webkit-clip-path: var(--clip-path);
  clip-path: var(--clip-path);
}

這樣，在我們需要使用 clip-path 的地方，我們都用 --clip-path 替代，它可以正常工作：

header {
  --clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2.5em), 0% 100%);
}

甚至連 !important 都可以正常工作，因為它影響 CSS 變量的級聯。此外，如果由於某些原因你想要明確地設置 -webkit-clip-path，你也可以正常寫，這也是因為 * 是零特異性（意味著是最低優先級的選擇符——譯者註）。這種用法的主要缺點是要求瀏覽器必須同時支持你使用的屬性和 CSS 變量才能正常工作。不過，除了 Edge 之外，所有的瀏覽器都支持 CSS 變量而 Edge 也在準備支持它。除了上面這個問題，我沒發現其它的缺點了（除了顯然必須使用與標準屬性有些不同的屬性之外），但是如果你有發現別的坑，請在評論裏面留言讓我知道！

我想，CSS 變量的巧妙用法還有許多有待發掘。我想要知道這個技巧是否能改進一下讓它支持自定義 css 屬性全寫，比如將 box-shadow 分開成 --box-shadow-x 和 --box-shadow-y 等等，但是目前我還沒想到好辦法。你有好辦法嗎？??

【譯】巧用 CSS 變量實現自動前綴