Question

我对CSS变量有一个非常简单的问题。我想交换两个CSS变量，基本上是ES6中[a, b] = [b, a]的CSS等价物。这是一个简单的例子：

<p>White background</p>
<button>Black background</button>
<div>
  <p>Black background</p>
  <button>White background</button>
</div>

:root {
  --primary-color: #fff;
  --secondary-color: #000;
}

body {
  background-color: var(--primary-color);
}

button {
  background-color: var(--secondary-color);
}

div {
  /* i'd like to do the following: */
  --primary-color: var(--secondary-color);
  --secondary-color: var(--primary-color);

  /* so here, `--primary-color` would be `--secondary-color` from `:root`
   * and any children have these colors swapped as well
   */
  background-color: var(--primary-color);
}

但是，这会失败，因为CSS var()是实时绑定。我在这里错过了什么吗？或者这是规范目前的工作方式吗？

Answer 1

您正在创建一个循环依赖，因为您使用另一个属性定义每个属性，这不会起作用。相反，你可以通过引入更多变量来尝试这样的事情：

＆＃13;

:root {
  --p:#fff;
  --s:#000;
  --primary-color: var(--p);
  --secondary-color: var(--s);
}

body {
  background-color: var(--primary-color);
}

button {
  background-color: var(--secondary-color);
}

div {
  /* i'd like to do the following: */
  --primary-color: var(--s);
  --secondary-color: var(--p);
  
  background-color: var(--primary-color);
}

＆＃13;

<p>White background</p>
<button>Black background</button>
<div>
  <p>Black background</p>
  <button>White background</button>
</div>

＆＃13;

CSS变量 - 交换值？

1 个答案: