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 标志，这基本上意味着“如果尚未声明则声明”。

Answer 1

CSS代表cascading style sheets, 所以你不能用 parent...

覆盖任何东西

唯一的方法是创建一个更强的规则。

看看.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>

Answer 2

感谢 @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);
}

Answer 3

我会建议一种方法，通过为组件中的变量取别名并使用“父”或根变量作为主要值，而本地值是 !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>

css 变量 - 如果尚未定义则声明变量

css variables - declare variable if not already defined

css

css-variables