CSS Logic Gates with if() Function

.and .out {
  --value: if(style(--a: 0): 0; style(--b: 0): 0; else: 1);
}

.or .out {
  --value: if(style(--a: 1): 1; style(--b: 1): 1; else: 0);
}

.not .out {
  --value: if(style(--a: 1): 0; else: 1);
}

.xor .out {
  --value: if(
    style(--a: 0): if(style(--b: 1): 1; else: 0);
    style(--a: 1): if(style(--b: 0): 1; else: 0);
    else: 0
  );
}

Binary Converter

.binary > .out {
  /* Calculate the current bit value */
  --value: calc(mod(var(--dec, 0), 2));
  
  /* Value to pass to the next digit */
  --next-dec: calc(round(down, var(--dec, 0) / 2, 1));
  &::before {

  background: rgb(
    calc((1 - var(--value)) * 255),
    calc((1 - var(--value)) * 255),
    calc((1 - var(--value)) * 255)
  );
}

7-Segment Display

Dirac delta function using CSS math controls each segment: 

/* Half Adder: adds two bits */
.half-adder .sum {
  --value: if(
    style(--a: 0): if(style(--b: 1): 1; else: 0);
    style(--a: 1): if(style(--b: 0): 1; else: 0);
    else: 0
  );
}

.half-adder .carry {
  --value: if(style(--a: 0): 0; style(--b: 0): 0; else: 1);
}

/* Full Adder: adds two bits + carry in */
.full-adder .sum {
  /* Sum = (A XOR B) XOR Cin */
  --half-sum: if(
    style(--a: 0): if(style(--b: 1): 1; else: 0);
    style(--a: 1): if(style(--b: 0): 1; else: 0);
    else: 0
  );
  
  --value: if(
    style(--half-sum: 0): if(style(--cin: 1): 1; else: 0);
    style(--half-sum: 1): if(style(--cin: 0): 1; else: 0);
    else: 0
  );
}

.full-adder .carry {
  /* Carry = (A AND B) OR (Cin AND (A XOR B)) */
  --carry1: if(style(--a: 0): 0; style(--b: 0): 0; else: 1);
  --xor-ab: if(
    style(--a: 0): if(style(--b: 1): 1; else: 0);
    style(--a: 1): if(style(--b: 0): 1; else: 0);
    else: 0
  );
  --carry2: if(style(--cin: 0): 0; style(--xor-ab: 0): 0; else: 1);
  --value: if(style(--carry1: 1): 1; style(--carry2: 1): 1; else: 0);
}

/* Select one of two inputs based on select line */
.mux-2to1 .out {
  --value: if(
    style(--s: 0): var(--i0, 0);  /* S=0: select I0 */
    else: var(--i1, 0)            /* S=1: select I1 */
  );
}

/* 4:1 MUX implemented with basic logic gates */
/* Out = (I0·!S1·!S0) + (I1·!S1·S0) + (I2·S1·!S0) + (I3·S1·S0) */

.mux-4to1 .out {
  /* Step 1: NOT gates for select lines */
  --not-s1: if(style(--s1: 1): 0; else: 1);
  --not-s0: if(style(--s0: 1): 0; else: 1);
  
  /* Step 2: AND gates for selection conditions */
  --term0: if(style(--i0: 0): 0; style(--not-s1: 0): 0; style(--not-s0: 0): 0; else: 1);
  --term1: if(style(--i1: 0): 0; style(--not-s1: 0): 0; style(--s0: 0): 0; else: 1);
  --term2: if(style(--i2: 0): 0; style(--s1: 0): 0; style(--not-s0: 0): 0; else: 1);
  --term3: if(style(--i3: 0): 0; style(--s1: 0): 0; style(--s0: 0): 0; else: 1);
  
  /* Step 3: OR all terms together */
  --value: if(
    style(--term0: 1): 1;
    style(--term1: 1): 1;
    style(--term2: 1): 1;
    style(--term3: 1): 1;
    else: 0
  );
}