CSS Variable Timing Units Based on BPM

timingTempo.css

:root {
  --bpm: 120;
 
  /* n4 = quarter note; t4 = quarter-note triplet; m4 = four measures */

  --n4: calc(60s / var(--bpm));  
  --n1: calc(var(--n4) * 4);
  --n2: calc(var(--n4) * 2);
  --n8: calc(var(--n4) / 2);
  --n16: calc(var(--n4) / 4);
  --n32: calc(var(--n4) / 8);  
  --t4: calc(40s / var(--bpm));
  --t2: calc(var(--t4) * 2);
  --t8: calc(var(--t4) / 2);
  --t16: calc(var(--t4) / 4);  
  --m1: calc(var(--n4) * 4);  
  --m2: calc(var(--m1) * 2);  
  --m4: calc(var(--m1) * 4);  
  --m8: calc(var(--m1) * 8);  
}