What do you think about that ? Is tricky or bad ?
It can be usefull to edit multiple css properties in javascript with just change a variable.
| <div id="red"></div> | |
| <div id="blue"></div> | |
| <style> | |
| :root { | |
| --TRUE: initial; | |
| --FALSE: 0; | |
| --show-red: var(--TRUE); | |
| } | |
| #red { | |
| /* Display block if TRUE else hide the div */ | |
| display: var(--show-red, block); | |
| height: 50px; | |
| width: 50px; | |
| background-color: red; | |
| } | |
| #blue { | |
| /* Make div height 50px if show red div else 100px */ | |
| height: calc((2 - var(--show-red, 1)) * 50px); | |
| width: 50px; | |
| background-color: blue; | |
| } | |
| </style> |