[css-variables] Whether to support override a property using itself?

[helloyou2012]

I want to override property like this

:root {
  --main-color: #333;
  --main-color: var(--main-color, #666);
}
h1 {
  color: var(--main-color);
}

and expect

h1 {
  color: #333;
}

Does support ?

[FremyCompany]

Can you clarify what you are trying to do? Use a value but have children inherit another? The css way to achieve this is to have two properties.

* {
  --main-color: var(--inherited-main-color);
}

:root {
  --main-color: #aaa;
  --inherited-main-color: #bbb;
}

[tabatkins]

This isn't possible given how CSS parsing works - if you use the same property multiple times in a rule, all but the latest is automatically discarded. So in your example, only the --main-color: var(--main-color, #666); gets seen by CSS.

(And as it turns out, this doesn't work either - it does not set --main-color to #666, it makes it the guaranteed-invalid value, since the property is involved in a cycle with itself and thus is overridden to be the guaranteed-invalid value.)