超级简单的 CSS 变量入门
超级简单的 CSS 变量入门
Photo by 杰克逊·索法特
文章英文原文： css变量的超级简单开始
如果你像我一样，你对 CSS 变量的游戏有点晚了。也许你（和我一样）喜欢在 CSS-in-JS 中使用真正的 JavaScript 变量。不幸的是，我认识和尊重的聪明人说这很棒，我必须接受这个相对较新的平台。
当我开始创业时，我喜欢非常简单地开始。一起来看看吧。
在聊天中 “CSS 变量” ve “CSS 自定义属性” 我听说有人讨论过它，但我并不真正理解其中的差异。事实证明它们本质上是一样的♂️“CSS 自定义属性”是技术术语，但它通常被称为“CSS 变量”。
好吧，我们开始吧。变量 （自定义属性） 让我们快速开始：
<html>
<style>
：根 {
--颜色：蓝色；
}
.我的文字{
颜色: var(--color);
}
</style>
<body>
<div class="my-text">这将是蓝色的</div>
</body>
</html>
：根 , <html> 是匹配的伪类 （伪类） .实际上， ：根 取而代之 html 与我们使用的完全相同（更高的特异性） （特异性） 除了有）。
就像 CSS 中的所有其他内容一样，您可以将变量范围限定为文档的某些部分。出色地， ：根 而不是普通的选择器 （选择器） 我们可以用：
<html>
<style>
.蓝色文本{
--颜色：蓝色；
}
.red-text {
- 红色;
}
.我的文字{
颜色: var(--color);
}
</style>
<body>
<div class="blue-text">
<div class="my-text">这将是蓝色的</div>
</div>
<div class="red-text">
<div class="my-text">这将是红色的</div>
</div>
</body>
</html>
级联也适用于此：
<html>
<style>
.蓝色文本{
--颜色：蓝色；
}
.red-text {
- 红色;
}
.我的文字{
颜色: var(--color);
}
</style>
<body>
<div class="blue-text">
<div class="my-text">这将是蓝色的</div>
<div class="red-text">
<div class="my-text">
这将是红色的（即使它在蓝色文本 div 中，
红色文本更具体）。
</div>
</div>
</div>
</body>
</html>
您甚至可以使用 JavaScript 更改变量的值：
<html>
<style>
.蓝色文本{
--颜色：蓝色；
}
.red-text {
- 红色;
}
.我的文字{
颜色: var(--color);
}
</style>
<body>
<div class="blue-text">
<div class="my-text">
这将是绿色的（因为 JS 会改变颜色属性）
</div>
<div class="red-text">
<div class="my-text">
这将是红色的（即使它在蓝色文本 div 中，
红色文本更具体）。
</div>
</div>
</div>
<script>
const blueTextDiv = document.querySelector('.blue-text')
blueTextDiv.style.setProperty('--color', 'green')
</script>
</body>
</html>
在这里，它是你的 你超级简单的开始 .我没有在这篇文章中提到你为什么要这样做。我会让你用谷歌搜索（或者让你自己想象）来弄清楚。我希望这有助于您快速了解这个想法。祝你好运！
PS：如果你想知道它在 React 中是如何工作的，请查看： 使用 CSS 变量而不是 React 上下文 .
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
