通过巧妙运用来了解 CSS 自定义属性
【开发中】可自定义主题的 CSS 变量 #1377
CSS 自定义属性最大的用途之一是主题化。我们不妨考虑一下。假设您会在最高层级设置一些变量：
html {
--column-bg: #ae0001;
--menu-bg-hover: #680001;
--active-item: #D3A625;
}
/* Anywhere else in the CSS, you use the variables */
.menu:hover, .menu:focus {
background: var(--menu-bg-hover);
}
这样，如果您想更改主题，就可以在一个独立的地方进行操作，这使得逻辑推理变得非常简单。在这里，我们允许通过更改根元素的类来更改变量。任何使用这些变量的地方都会立即更新。
html {
--column-bg: #ae0001;
--menu-bg-hover: #680001;
--active-item: #D3A625;
}
html.alternate-theme {
--column-bg: #680001;
--menu-bg-hover: #BE0002;
--active-item: #00FFBA;
}
/* Anywhere else in the CSS, you use the variables */
.menu:hover, .menu:focus {
background: var(--menu-bg-hover);
}
这是 Stephanie Liu 对主题功能的精彩运用。她重现了 Slack 界面的主题功能。
上面我展示了如何通过更改类来改变 CSS 自定义属性的值，但 JavaScript 可以通过选择元素并向其传递新值来直接改变这些变量值，就像el.style.setProperty("--custom-property", "new-value");Stephanie 在这个演示中所做的那样。
就像任何优秀的主题设计一样，用户的选择应该被保留下来。在这个演示中，Stephanie 通过将用户的选择写入 `<div>` 标签来实现这一点localStorage，所以请查看她的 JavaScript 代码，了解她是如何做到的。
调整主题颜色
使用 CSS 自定义属性控制颜色主题的另一个好处是，有时您可能需要某种颜色的变体，而不是选择全新的第二种颜色。例如，按钮的边框使用选定的颜色，而背景则使用淡化版本。
在 Ben Szabo 的一篇题为《使用 CSS 变量在 RGBA 中进行主题化》的文章中，他提到可以使用 RGBa 或 HSLa 来进行不透明度的调整。
如果原始颜色一开始就是 RGB 或 HSL 格式，那么调整不透明度就很容易：
:root {
--my-color-rgb: 255, 0, 0;
}
.btn {
border: 1px solid var(--my-color-rgb);
background: rgba(var(--my-color-rgb), 0.5);
}
我曾经做过一个演示，在颜色上叠加了一个透明的黑色渐变来加深颜色，所以不仅可以提亮，还可以加深：
Ana Tudor 向我们展示了如何通过切换 CSS 自定义属性来对样式进行大幅度更改。
她称之为干切换。
这个技巧源于数学以及乘法0和乘法的强大功能1。利用乘法calc()，我们可以将数值乘以 0 或 1，结果要么为零，要么为原值。我们可以将这个基本技巧应用于颜色、位置、变换……等等各种属性，只需改变乘法和乘法的取值，就能得到截然不同的结果。
来自 Marius Niveri 的有趣的 SVG 悬停效果
我喜欢这个概念：先用 CSS 暂时移除普通彩色 SVG 的颜色，将其转移到一个自定义属性，然后在鼠标悬停时重新应用颜色。就像渐进增强着色一样！
基思·克拉克将它们与圆锥渐变结合起来，制作了饼图。
直接从标记中传递百分比：
<div class="pie pie--value" style="--percent:65;"></div>
然后使用该值，通过圆锥梯度绘制饼图。
.pie {
background-image: conic-gradient(
rgba(0,0,0,0) calc(3.6deg var(--percent)),
rgba(0,0,0,1) calc(3.6deg var(--percent))
);
background-blend-mode: overlay;
background-position: 50% 50%;
background-size: 150%; /* oversize bg image to prevent "underdraw" */
width: 3.75em;
height: 3.75em;
border-radius: 50%;
}
Keith 的演示经过了精心修饰：
他甚至还加入了一个额外的小技巧，即使用 CSS 计数器来显示百分比值。
Sérgio Gomes 使用自定义属性的宽高比技巧
如果可以直接指定 HTML 元素的宽高比呢？这里有相关文档。您可以直接通过元素的自定义属性传递宽高比：
<div style="--aspect-ratio:16/9;">
</div>
然后使用该值在内部应用一个大小合适的伪元素，将其推至该大小。
[style="--aspect-ratio"] > :first-child {
width: 100%;
}
[style="--aspect-ratio"] > img { height: auto;
}
@supports (--custom:property) {
[style="--aspect-ratio"] {
position: relative;
}
[style="--aspect-ratio"]::before {
content: "";
display: block;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
[style*="--aspect-ratio"] > :first-child {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}
真聪明。
文章来源：https://dev.to/chriscoyier/learn-about-css-custom-properties-through-clever-uses-of-them-2fjo