gpt4 book ai didi

css - 如何使使用另一个变量定义的 CSS 变量反射(reflect)对依赖项的更改?

转载 作者:行者123 更新时间:2023-11-28 19:19:15 25 4
gpt4 key购买 nike

<分区>

我想使用 CSS 变量来定义一些复合属性。在这个例子中,我定义了一个 --border-width变量以及 --border使用 --border-width 的变量多变的。然后我覆盖某些元素的边框宽度值:

:root {
--border-width: 1px;
--border: var(--border-width) solid #000;
}

.demo {
border: var(--border);
margin: 1em;
}

.demo.active {
--border-width: 10px;
}
<div class="demo">
Should have thin border
</div>

<div class="demo active">
Should have thick border
</div>

我知道新变量正在应用于元素;我可以在检查器中看到它,如果我添加一个明确的 border-width: var(--border-width)属性(property).demo , 它应用预期的宽度值。然而,似乎 --border尚未重新计算以反射(reflect)对 --border-width 的更改.

我不希望我的每个元素在每次使用速记时都必须指定所有速记属性,但似乎我遗漏了一些关于 CSS 变量的基本知识。

例如,我宁愿不必这样做:

:root {
--border-width: 1px;
--border-style: solid;
--border-color: #000;
}

.demo {
border: var(--border-width) var(--border-style) var(--border-color);

/*
Or this

border-width: var(--border-width);
border-style: var(--border-style);
border-color: var(--border-color);
*/

margin: 1em;
}

.demo.active {
--border-width: 10px;
}
<div class="demo">
Should have thin border
</div>

<div class="demo active">
Should have thick border
</div>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com