Re: [csswg-drafts] [css-values-4] inherit() function: like var() for parent value, for any property (#2864)

One more use case to add to the pile here— I was looking for a way to increment an angular value as I traversed down the layers of the DOM for simple—dare-I-say archaic—debugging.

My process in trying to set this up was…
1. ([codepen](https://codepen.io/brandonmcconnell/pen/XWYGJKy/097c4bf42871a86d5005e58fdf2183c3?editors=0110)) tried to use variable that inherit the same variable value from their parent and increment it — dead end
2. ([codepen](https://codepen.io/brandonmcconnell/pen/jOKJEYx/646b0b78ba94ceeb9531bb1411fc15ba?editors=1100)) tried to do the same but with `@property` to enable inheriting the value — dead end there too, presumably because the variable does not execute the value in real-time but rather passes its reference (I'm totally guessing here)
3. ([codepen](https://codepen.io/brandonmcconnell/pen/RwJdNKr/b3016632b5eeefa1748375f03a70b196)) tried to do the same but utilize counters to increment the values and then variables to inherit the calc values and then calc them — also a dead end (re https://github.com/w3c/csswg-drafts/issues/1026)

`inherit()` would appear to fix this issue entirely.

Here's the source for my first example listed above ☝🏼

```html
<div class="css-debug"><div><div><div><div><div><div><div><div><div><div></div></div></div></div></div></div></div></div></div></div></div>
```

```css
html, body {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
}

div {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  border: 2px solid red;
}

.css-debug, .css-debug *, .css-debug *::before, .css-debug *::after {
  --css-debug-hue: calc(var(--css-debug-hue, 0deg) + 20deg);
  box-shadow: inset 0 0 0 1px hsl(var(--css-debug-hue) 100% 50%);
}
```

![screenshot](https://user-images.githubusercontent.com/5913254/206316853-b988a17b-64f4-49ac-9261-dec77fd32b98.png)

https://codepen.io/brandonmcconnell/pen/XWYGJKy/097c4bf42871a86d5005e58fdf2183c3?editors=0110

-- 
GitHub Notification of comment by brandonmcconnell
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2864#issuecomment-1341726276 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 7 December 2022 23:18:05 UTC