我可以使用带有后备功能的自定义属性来定义自定义属性的一部分吗？答案

【问题标题】：Can I use a custom property with fallback to define part of a custom property [duplicate]我可以使用带有后备功能的自定义属性来定义自定义属性的一部分吗？
【发布时间】：2021-08-22 17:35:41
【问题描述】：

我正在为一个小项目定义一个颜色集。我想为一系列 hsla() 颜色定义自定义属性，但能够改变这些颜色的不透明度。我应该能够做这样的事情：

:root {
  --clr-900: hsla(36, 83%, 0%, var(--opacity, 1));
  --clr-700: hsla(36, 83%, 30%, var(--opacity, 1));
  --clr-300: hsla(36, 83%, 70%, var(--opacity, 1));
  --clr-200: hsla(36, 83%, 85%, var(--opacity, 1));
  --clr-100: hsla(36, 83%, 100%, var(--opacity, 1));
}

理论上，如果我只应用该属性，我得到的不透明度为 1。如果我设置 --opacity 自定义属性，它会改变不透明度：

.test1 {
  background-color: var(--clr-900);
  // hsla(36, 83%, 85%, 1)
}

.test2 {
  --opacity: 0.65;
  background-color: var(--clr-900);
  // hsla(36, 83%, 85%, 0.65)

当我尝试这个时，我总是得到回退值 (1)，而不是在存在时解析 var(--opacity)。

【问题讨论】：

标签： css

【解决方案1】：

CSS 变量不能以您尝试使用它们的方式工作。与其他变量一起定义的变量只取同级或上一级的变量。

我发现一个不错的“技巧”是，使用通用选择器* 来定义所有级别的变量，而不是使用:root 选择器。这样，由于您在同一级别上定义颜色变量，因此更改不透明度变量有效。请记住，这可能会导致一些不需要的结果，如果您想考虑其他解决方案，这些可能会对您有所帮助：

CSS scoped custom property ignored when used to calculate variable in outer scope

Overriding :root CSS variables from inner scopes

* {
  --opacity: 50;
  --clr-900: hsla(36, 83%, 0%, var(--opacity, 1));
  --clr-700: hsla(36, 83%, 30%, var(--opacity, 1));
  --clr-300: hsla(36, 83%, 70%, var(--opacity, 1));
  --clr-200: hsla(36, 83%, 85%, var(--opacity, 1));
  --clr-100: hsla(36, 83%, 100%, var(--opacity, 1));
}

.test1 {
  background-color: var(--clr-900);
}

.test2 {
  --opacity: 0.65;
  background-color: var(--clr-900);
}

<p class="test1">hello world</p>
<p class="test2">hello world</p>

【讨论】：