css variable - default value on var not getting passed

Question

I get 2 different output for the code below. It should give the same output since default value should be taken by the css variable. Below is the code where I commented passing span a value, since it has a default value in the var declaration . Uncommenting the value assignment line give different output. Looking for a explanation of what is happening.

Here is the code pen with commented code - https://codepen.io/skandasoft/pen/MWjoMZe

and here is with uncommented - https://codepen.io/skandasoft/pen/VwKWJqd

Bootstrappy Grid with CSS Variables!

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

Danield · Accepted Answer · 2020-12-20T01:02:46.717

Custom properties inherit.

From the spec:

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

This means that if no value is set for a custom property on a given element, the value of its parent is used.

In this case, the parent element defines the custom property: --span:

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

So the value of the --span property will be 7 on all the children - unless a different value is explicitly defined on a child.

Now the difference between the two versions of the code is clear.

In the commented version, var(--span, 1) in the .item class evaluates to 7 due to inheritance

Since there are only 2 columns in the grid, each item spans the full grid width

In the uncommented version (with --span: 1; defined in the .item class), var(--span, 1) in the .item class evaluates to 1 - because it is explicitly defined on the child.

NB

Fallback values are only used as the substitution value when a given custom property is invalid / not defined

In this case, the second item in the outer grid defines the --span custom property with value 7 and it is available to all its child elements.

score 1 · Answer 2 · answered Dec 20 '20 at 00:32

This happens because the .item class has a higher specificity than the inherited --span: 7 that was provided. See the below screenshot of it being overriden. So if you set --span: 7 on these 2 child elements (1 & 2), you will no longer see a difference toggling the --span: 1 value on and off.

As far as I can tell, the default values are correctly set.

score 1 · Answer 3 · answered Dec 20 '20 at 08:07

As explained by @Danield the issue is inheritance and you can avoid it by using initial like below:

.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 variable - default value on var not getting passed

3 Answers3

NB