Logical Operations with CSS Variables CSS Custom Properties

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.

Impressive!

Logical Operations with CSS Variables →

☝️ FYI: They’re officially called “CSS Custom Properties”, not “CSS Variables” 😉

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.