Can a recursive variable be expressed in css?

by

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;
}
<body>
  <div class="y">
    <div class="x">
      <div class="y">
        <div class="x">
          <div class="y">
            <div class="x">
              <div class="y result">

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

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)

enter image description here

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));
}
  <ul>level A
    <li>item 1
    </li>
    <li>item 2
      <ul>level B
        <li>item 2.1
          <ul>level C
            <li>item 2.1.1
            </li>
            <li>item 2.1.2
            </li>
          </ul>
        </li>
        <li>item 2.2
        </li>
      </ul>
    </li>
  </ul>

More Related Contents:

  1. Is it possible to use CSS vars in CSS3 selectors?
  2. Avoiding repeated constants in CSS
  3. CSS animate custom properties/variables
  4. change the menu font size
  5. Landscape printing from HTML
  6. CSS grid square layout [duplicate]
  7. Masonry-style Layout ONLY with CSS
  8. Position icons into circle
  9. How can I have two fixed width columns with one flexible column in the center?
  10. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  11. Expanding a parent to the height of its children
  12. Can you link to a CSS file from an email?
  13. How to style dt and dd so they are on the same line?
  14. How to display vertical text in table headers with auto height / without text overflow?
  15. Why does vw include the scrollbar as part of the viewport?
  16. `margin:auto;` doesn’t work on inline-block elements
  17. CSS – How to have children in different parents the same height?
  18. How to replace color of PNG image using CSS? [duplicate]
  19. What is haslayout?
  20. Bootstrap 3: Push/pull columns only on smaller screen sizes
  21. How can I write ‘a:hover’ in inline CSS?
  22. Is there a reason to use a instead of a:link or a:visited in my stylesheet?
  23. Make a parent div webkit-filter not affect children
  24. Change color of bootstrap navbar on hover link?
  25. Yet Another Divs vs Tables issue: Forms
  26. Hide element, but show CSS generated content
  27. How can change width of dropdown list?
  28. BEM block, naming & nesting
  29. Alignment of content vertically in adjacent flexbox containers
  30. Flex elements ignore percent padding in Firefox

Leave a Comment