1

对不起，如果标题有点令人困惑，但我不知道如何用英语更容易理解地描述它。

有人知道为什么第一个 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 集是一组很棒的属性，那么如果它像预期的那样工作，那对我来说将是一个很大的努力。

4

1 回答 1

0

您将--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

于 2017-03-30T18:10:04.563 回答