Variables are defined and cascade the same as any other property. You can define variables and other properties on the third-level x element in your markup like

Variables are defined and cascade the same as any other property. You can define variables and other properties on the third-level x element in your markup like so: x > x > x { --my-variable: 'my-value'; display: inline; /* etc. */ } It would be used by defining the value of another property as the value of the variable. Note the selectors don't have to match; in this case all x elements will have their content properties set to the --my-variable value but only the third-nested x element will have a --my-variable value set. x { content: var(--my-variable); } Not that this is a particularly coherent example but hopefully you get the idea.