CSS变量 - 如果尚未定义，请声明变量

Question

我有一个项目，分为父级应用程序和几个独立仓库中的可重用子组件。我想在这些子组件中定义默认CSS变量，可以被父级应用程序覆盖，但是我找不到正确的语法。以下是我尝试过的内容：

/* parent */
:root {
  --color: blue;
}

/* child */
:root {
  --color: var(--color, green);
}

.test {
  width: 200px;
  height: 200px;
  background: var(--color, red);
}

https://codepen.io/daviestar/pen/brModx

颜色应该是蓝色的，但是当子元素:root被定义时，在Chrome浏览器中实际显示的颜色是红色。

这个问题有正确的解决方法吗？在SASS中，您可以为子变量添加!default标志，这基本上意味着“如果尚未声明，则声明”。

- daviestar

Answer 1

我建议采用在组件中为变量打别名的方法，并使用“parent”或根变量作为主值，而本地值则通过!default来定义。

.parent {
  --background: red;
}

.child {
  --child_size: var(--size, 30px); /* !default with alias */
  --child_background: var(--background, green); /* !default with alias */

  background-color: var(--child_background);
  width: var(--child_size);
  height: var(--child_size);
}

<div class="parent">
  <div class="child"></div>  
</div>
<hr>
<div class="child"></div>  

- Sherbrow

---

这是一个不错的方法，谢谢。 - daviestar

Answer 2

CSS代表“层叠样式表”，因此您不能通过父级来覆盖任何内容...唯一的方法是创建一个更强的规则。请看“.c1”和“.p1”。

.parent {
  --background: red;
}

.child {
  --size: 30px;
  --background: green; /* this wins */

  background-color: var(--background);
  width: var(--size);
  height: var(--size);
}

.p1 .c1 {
  --background: red; /* this wins */
}

.c1 {
  --size: 30px;
  --background: green;

  background-color: var(--background);
  width: var(--size);
  height: var(--size);
}

<div class="parent">
  <div class="child"></div>  
</div>

<hr />

<div class="p1">
  <div class="c1"></div>  
</div>  

- Hitmands

---

适合您吗？ - Hitmands

Answer 3

感谢 @Hitmands 的提示，我有了一个不错的解决方案：

/* parent */
html:root { /* <--- be more specific than :root in your parent app */
  --color: blue;
}

/* child */
:root {
  --color: green;
}

.test {
  width: 200px;
  height: 200px;
  background: var(--color);
}

- daviestar

---

我不明白为什么将变量移动到全局作用域会更整洁？ - Hitmands

我在使用CSS变量时最常见的用例是全局的东西，比如font-size和主题颜色，而且我希望能够从父级应用程序中覆盖这些内容。 - daviestar

同时采用这种方法意味着您不必在父级应用程序中添加新的CSS规则，例如.parent .child { /* override */ }，可以让变量特定性为您完成此操作。 - daviestar