Can a recursive variable be expressed in css?

Question

For the html:

  

    

      ...
    
  

A

Answer 1

You can use two CSS variables to simulate the recursive behavior and avoid cycle dependency.

Here is an example:

body {
  --x: 10;
}
.y {
  --y: calc(var(--x) + 1);
}
.x{
  --x: calc(var(--y) + 1);
}
.result {
  border-right:calc(1px * var(--y)) solid red;
  border-left:calc(1px * var(--x)) solid green;
  height:50px;
}

If you inspect the element you will find for the last element that border-right is equal to 17px (10 + 7) and border-left is equal to 16px (10 + 6)

This idea fits nicely in elements with a 2 level structure, like lists:

body {
  --x: 30;
}

ul { 
    font-size: calc(var(--x) * 1px);
    --y: calc(var(--x) - 8);
}

li {
  --x: calc(var(--y));
}

  
level A
    
item 1
    
    
item 2
      
level B
        
item 2.1
          
level C
            
item 2.1.1
            
            
item 2.1.2
            
          
        
        
item 2.2