This article demonstrates how to perform logical operations on CSS switch variables (variables with values 0 or 1) using arithmetic within the calc() function. We lack dedicated logical functions in CSS, but these calculations provide effective emulations.

Logical Operations in CSS using calc()

NOT Operation

Negating a switch variable (--j) is simple: subtract it from 1.

--notj: calc(1 - var(--j));

If --j is 0, --notj becomes 1; if --j is 1, --notj is 0.

AND Operation

The AND operation returns true only if both operands are true. For switch variables (--k and --i), multiplication achieves this:

--and: calc(var(--k) * var(--i));

This yields 1 only when both --k and --i are 1; otherwise, it's 0.

NAND Operation (NOT AND)

NAND is the negation of AND:

--nand: calc(1 - var(--k) * var(--i));

OR Operation

The OR operation is true if at least one operand is true. Using De Morgan's Law (not (A or B) = (not A) and (not B)), we get:

--or: calc(1 - (1 - var(--k)) * (1 - var(--i)));

NOR Operation (NOT OR)

NOR is the negation of OR:

--nor: calc((1 - var(--k)) * (1 - var(--i)));

XOR Operation (Exclusive OR)

XOR is true if exactly one operand is true. Subtracting the variables and squaring the result gives the absolute value, providing the desired 0 or 1 outcome:

--xor: calc((var(--k) - var(--i)) * (var(--k) - var(--i)));

Practical Applications

Hiding a Disabled Panel on Small Screens

This example shows a disabled advanced controls panel that should only be visible on larger screens.

HTML (Illustrative):

<div class="advanced">
  <!-- Advanced controls -->
</div>
<input type="checkbox" id="toggle">

CSS:

body {
  --k: var(--wide, 0); /* Switch for screen size */
  display: flex;
  flex-direction: var(--wide, column);
  @media (min-width: 768px) { --wide: 1; } /* Adjust breakpoint as needed */
}

.advanced {
  --i: var(--enabled, 0); /* Switch for enabled state */
  --noti: calc(1 - var(--i));
  filter: contrast(calc(1 - var(--noti) * 0.9)) opacity(calc(1 - var(--noti) * 0.7));
  pointer-events: var(--enabled, none);
  margin: calc(var(--or) * 20px) 0; /* Example margin */
  height: calc(var(--or) * 200px); /* Example height */
  [id='toggle']:checked ~ & { --enabled: 1; }
  --or: calc(1 - (1 - var(--k)) * (1 - var(--i))); /* OR operation */
}

This uses the OR operation (--or) to show the panel if the screen is wide (--k is 1) or the panel is enabled (--i is 1).

Positioning Faces of a 3D Shape (Complex Example)

The second example, involving a complex 3D shape, demonstrates more advanced use of logical operations for precise face positioning. Due to its complexity, this example is omitted for brevity. The original text provides a detailed explanation and interactive demos illustrating this use case. The core concept remains the same: using calc() and logical operations (AND, OR, NOT, XOR, NAND, NOR) to conditionally apply transformations based on switch variable states.

The above is the detailed content of Logical Operations with CSS Variables. For more information, please follow other related articles on the PHP Chinese website!