In CSS we have feature queries (@supports) available to create if–else-like structs. What if we could extend our means of using conditions in CSS?
Roman Komarov provides us with a clever technique – which involves using CSS Custom Properties, calc(), and some binary logic – to implementing this type of conditions on a per CSS rule basis. The simplest way to explain it is to just show it:
The lines where * var(--is-big) is used are applied when the value of that CSS Variable is 1(true). The lines where * (1 - var(--is-big)) is used are applied when said value is 0(false).
const el = document.querySelector('#my-elem');
var foo = window.getComputedStyle(el).getPropertyValue('--foo');