Going beyond Binary Conditions for CSS Calculations, Ana Tudor takes it to a whole new level by introducing the logical operations (and, or, nand, nor, not, and xor) to CSS — all built on top of calc()
Very often, while using switch variables, I wish I could perform logical operations on them. We don’t have functions like not(var(--i)) or and(var(--i), var(--k)) in CSS, but we can emulate these and more with arithmetic operations in a calc() function.
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).