时间戳

首页 > 解决方案 > 没有重新计算 HSL 的 CSS 变量

nested - 没有重新计算 HSL 的 CSS 变量

问题描述

情况

我的 CSS 文件中有以下定义（简化）。

:root {
  --app-color-hue: 30;
  --app-color: hsl(var(--app-color-hue), 80%, 60%);
}

body {
  --app-color-hue: 145;
  background: var(--app-color);
}

我希望在app-color整个应用程序中使用 CSS 变量并通过--app-color-hue. 但是，该body元素显示为Orange (30)而不是Green (145)。

当我hsl在值中设置自己时，颜色更新得很好。

body {
  background: hsl(var(--app-color-hue), 80%, 60%);
}

代码笔： https ://codepen.io/Dyljyn/pen/BaNVwqE

可能的解释

我假设问题是hsl确实检测到更改并且当其中的 CSS 变量在另一个元素中更新时不会重新计算。

问题

有没有人对这个问题有更多的了解？

如果它被认为是错误，我也不知道如何将其报告为错误。因此，我也很感激有人指出我在这方面的正确方向。

标签： nestedcss-variableshsl

解决方案

我自己找到了答案。

自定义属性的范围仅限于声明它们的元素，并参与级联：此类自定义属性的值是由级联算法决定的声明的值。
来源：https ://developer.mozilla.org/en-US/docs/Web/CSS/--*

所以我的“可能的解释”是设计使然，因此不是错误。

推荐阅读