作者：骨头少校_726 | 来源：互联网 | 2022-10-12 15:19
在Stack Overflow的设计系统中，我们使用Less来编译CSS颜色值。
我们有类似@orange-500这样的全局Less变量，这些变量经常针对悬停状态，建筑边框样式，背景颜色等进行修改。
在Less中，它写为darken(@orange-500, 5%)。我正在尝试使用本机CSS变量实现类似的目的。切换到CSS变量将使我们能够更快地发布依赖主题的功能（堆栈交换网络，暗模式等），使用更少的CSS行，同时在媒体查询上启用变量交换（高对比度，暗模式等） ）。
hsl当变量的作用域为CSS类时，此示例将在工作中覆盖颜色的明度值：
.card {
--orange: hsl(255, 72%, var(--lightness, 68%));
background: var(--orange);
}
.card:hover {
--lightness: 45%;
}
Hello world
但是，我们需要在一个可交换的位置上全局指定颜色变量，以支持全局主题设置，但这并不能按预期工作：
:root {
--orange: hsl(255, 72%, var(--lightness, 68%));
}
.card {
background: var(--orange);
}
.card:hover {
--lightness: 45%;
}
Hello world
我试图从切换:root到html或body没有任何的运气。有什么解决方法吗？
1> paceaux..：
This is a scoping issue. The way you're doing it, you're inheriting --orange from the :root, and --orange in the :root has a lightness of 68%.
In order to change it, you'll want to re-scope the --orange variable to an element that will look up the new --lightness value. There's a few ways to pull this off:
Option 1: duplicate the --orange variable on the element:
:root {
--lightness: 68%;
--orange: hsl(255, 72%, var(--lightness));
}
.card {
background: var(--orange);
--orange: hsl(255, 72%, var(--lightness));
}
.card:hover {
--lightness: 45%;
}
Hello world
![[c++基础]STL](https://img.php1.cn/3c972/1edc8/c5a/a04ecc977fd8ed28.jpeg)
![Spark中使用map或flatMap将DataSet[A]转换为DataSet[B]时Schema变为Binary的问题及解决方案](https://img6.php1.cn/3cdc5/9b0d/243/f27d40b3b7e4b51b.png)
京公网安备 11010802041100号