css 变量 - var 的默认值未被传递

Question

下面的代码得到了 2 个不同的输出。它应该给出相同的输出，因为 css 变量应采用默认值。下面是我评论传递 span 一个值的代码，因为它在 var 声明中有一个默认值。取消注释赋值行会给出不同的输出。寻找正在发生的事情的解释。

这里是带注释代码的码笔- https://codepen.io/skandasoft/pen/MWjoMZe

这里是未注释的 - https://codepen.io/skandasoft/pen/VwKWJqd

带有 CSS 个变量的引导网格！

<body>
    <div class="grid">
        <div class="item">1</div>
        <div class="item" style="--span: 7">
            <div class="grid" style="--cols: 2">
                <div class="item">1</div>
                <div class="item">2</div>
            </div>
        </div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>

    <style>
        .grid {
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(var(--cols, 10), minmax(0, 1fr));
        }
        .item {
            /* --span: 1; */
            grid-column: span var(--span, 1); /**-span has a default value of 1 **/
            background-color: yellow;
            padding:10px;
        }
    </style>
</body>

Answer 1

发生这种情况是因为 .item class 比提供的继承 --span: 7 具有更高的特异性。请参阅下面它被覆盖的屏幕截图。因此，如果您在这 2 个子元素（1 和 2）上设置 --span: 7，您将不再看到打开和关闭 --span: 1 值的差异。

据我所知，默认值设置正确。

Answer 2

自定义属性继承。

来自spec：

Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules, ...

这意味着如果没有为给定元素的自定义设置属性值，则使用其父元素的值。

在本例中，父元素定义了自定义属性: --span:

<div class="item" style="--span: 7">

因此 --span 属性的值在所有子项上都是 7 - 除非在子项上明确定义了不同的值。

现在两个版本的代码区别就很清楚了。

在注释版本中，.item class 中的 var(--span, 1) 由于继承

的计算结果为 7

由于网格中只有 2 列，因此每个项目都占据整个网格宽度

在未注释的版本中（使用 --span: 1；在 .item class 中定义），.item class 中的 var(--span, 1) 计算为 1 - 因为它是在子项上明确定义。

注意

当给定的自定义属性无效/未定义时，后备值仅用作替换值

在这种情况下，外部网格中的第二项定义了值为 7 的 --span 自定义属性，它可用于其所有子元素。

Answer 3

正如@Danield 所解释的，问题是继承，您可以通过使用 initial 来避免它，如下所示：

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(var(--cols, 10), minmax(0, 1fr));
  --span:initial; /* this will stop the propagation of the variable */
}

.item {
  grid-column: span var(--span, 1); /**-span has a default value of 1 **/
  background-color: yellow;
  padding: 10px;
}

<div class="grid">
  <div class="item">1</div>
  <div class="item" style="--span: 7">
    <div class="grid" style="--cols: 2">
      <div class="item">1</div>
      <div class="item">2</div>
    </div>
  </div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

css 变量 - var 的默认值未被传递

css variable - default value on var not getting passed

css

css-variables

css-grid

注意