覆盖 CSS 变量并将其分配给另一个变量不会生效（var 链）答案

【问题标题】：Override a CSS variable and assign it to another variable doesn't take effect (var chain)覆盖 CSS 变量并将其分配给另一个变量不会生效（var 链）
【发布时间】：2017-03-30 18:04:51
【问题描述】：

对不起，如果标题有点混乱，但我不知道如何用英语描述它更容易理解。

有人知道为什么第一个 div 没有红色边框吗？我会假设 --secondary 变量会被孩子覆盖，并对分配此变量的所有其他变量生效？！

codepen.io/anon/pen/wJQVRO

编辑
不要问我为什么 plunker 和 codepen 不支持 @apply 但这几乎是我需要的用例

http://codepen.io/anon/pen/wJQVRO/

  body {
    --primarycolor: {
      border: 2px solid var(--secondary);
    };

    --secondary: blue;
    border:2px solid var(--secondary);
    padding:5px;
  }

  div {
    --secondary: red;
    @apply(--primarycolor);
    padding:5px;
  }

  p {
    --secondary: black;
    @apply(--primarycolor);
    padding:5px;
  }

在我的聚合物环境中，@apply 可以工作，但这不是问题，对此感到抱歉..无法确定为什么 codepen 和 plunker 不支持它？！无论如何，我要解释的问题是 div 和 p 元素都将具有蓝色边框，而不像预期的那样具有红色和黑色边框。假设 --primarycolor 集是一组很棒的属性，那么如果按预期工作，那对我来说将是一个很大的努力。

【问题讨论】：

标签： css chain css-variables

【解决方案1】：

您将--secondary 颜色分配给red，但为div 边框颜色分配了--primarycolor 的值，即blue 在body 中所述

div {
    --secondary: red; // change this to --primarycolor: red;
    color: var(--primarycolor);
    border:2px solid var(--primarycolor); // or change this to var(--secondary)
    padding:5px;
  }

所以要么将边框分配更改为 var(--secondary) 或更改为 --primarycolor: red 而不是 --secondary: red

【讨论】：

谢谢，但这不是我要找的……有一些误解。我编辑了我的帖子。