css 变量 - var 的默认值未通过答案

【问题标题】：css variable - default value on var not getting passedcss 变量 - var 的默认值未通过
【发布时间】：2020-12-19 22:53:25
【问题描述】：

下面的代码有 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>

【问题讨论】：

标签： css css-grid css-variables

【解决方案1】：

自定义属性继承。

来自spec：

自定义属性是普通属性，所以可以声明在任何元素，都通过正常继承和级联来解决规则，...

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

在这种情况下，父元素定义了自定义属性：--span:

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

因此，所有子级的 --span 属性的值为 7 - 除非在子级上显式定义了不同的值。

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

在注释版本中，.item 类中的var(--span, 1) 由于继承而计算为 7

由于网格中只有 2 列，因此每个项目跨越整个网格宽度

在未注释的版本中（--span: 1；在 .item 类中定义），.item 类中的var(--span, 1) 的计算结果为 1 - 因为它是在子级上显式定义的。

注意

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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>