重写：内部作用域中的根CSS变量

在我们的at堆栈溢出中，我们使用较少的代码来编译CSS颜色值

我们有全局较少的变量，如

@orange-500

，经常针对悬停状态、建筑边框样式、背景颜色等进行修改

在Less中，这写为

变暗（@orange-500，5%）

。我正在尝试使用本机CSS变量实现类似的功能。切换到CSS变量将使我们能够更快地发布依赖于主题（堆栈交换网络、暗模式等）的功能，CSS行更少，同时支持在媒体查询（高对比度、暗模式等）上交换变量

在

hsl

中覆盖颜色亮度值的示例在变量范围限定为CSS类时有效：

.card{
--橙色：hsl（255，72%，var（--亮度，68%）；
背景：var（--橙色）；
}
.卡：悬停{
--亮度：45%；
}

你好，世界

我很想了解是否有比此解决方案更理想的解决方案，但作为一种可能的解决方法，您可以进一步分解CSS变量，并在元素样式定义中构建值，如下所示：

：根目录{
--橙色：37,72%；
--红色：1,72%；
--蓝色：215,72%；
--绿色：126,72%；
--LumDefault:68%；
--LumDark:45%；
--LumLight:80%；
}
.卡片{
背景：hsl（var（--orangeColor），var（--LumDefault））；
}
.卡：悬停{
背景：hsl（var（--orangeColor），var（--LumDark））；
}
.卡：活动{
背景：hsl（var（--redColor），var（--LumDark））；
颜色：hsl（var（--greenColor），var（--LumLight））；
}

你好，世界

简单的解决方案是将CSS变量放入一个单独的CSS文件中，然后根据需要将其交换出去。例如，支持暗模式的媒体查询可以进行交换，也可以使用JavaScript、预烘焙主题等

这样做的好处是用变量定义交换CSS文件，从而实时更改CSS呈现

假设您正在使用明/暗模式的媒体查询。如果浏览器理解并请求“暗模式”，则仅加载第一个文件。但是，如果浏览器不理解这些媒体查询，您的“默认”是light.css，因为两个css文件都已加载，但后续规则会覆盖以前的规则

<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css">

dark.css

另外，请注意，正如Travis在回答中提到的，简化变量并在元素内部构建完整规则是一个好主意。

style.css（主样式文档）

---

作为补充说明，您可能希望使用CSS

颜色方案

属性来更好地支持本机浏览器元素。

这是一个范围问题。按照您的操作方式，您从

:root

继承了

--orange

，并且

:root

中的

--orange

具有68%的亮度

要更改它，您需要将

--orange

变量的范围重新限定为一个元素，该元素将查找新的

--lightness

值。有几种方法可以做到这一点：

选项1：复制元素上的

--orange

变量：

：根目录{
--亮度：68%；
--橙色：hsl（255,72%，var（--亮度））；
}
.卡片{
背景：var（--橙色）；
--橙色：hsl（255,72%，var（--亮度））；
}
.卡：悬停{
--亮度：45%；
}

你好，世界

一开始似乎很奇怪，但当你真正开始了解它时，当一个东西悬停时，橙色在页面上改变是否有意义？其目的是在

.card:hover

的上下文中，用

x

数量修改全局橙色的亮度。是的，我明白了，我只是说，一旦你意识到

:root

中定义的

--lightness

是一个全局变量，而

.card:hover

中定义的

--lightness

是一个局部变量，那么行为就和预期的一样了，因为

--orange'引用的是全局的

--lightness`而不是局部的

——轻盈

简短的回答：这是不可能的。如果var（）在：root中使用，那么它就结束了，已经对这个问题的所有DOM进行了计算。

:root {
  --text-color: #333;
  --background-color: #fff;
}

:root {
  --text-color: #dadada;
  --background-color: #333;
}

body {
  color: var(--text-color);
  background-color: var(--background-color);
}