Skip to content

Instantly share code, notes, and snippets.

@softpunch
Last active June 21, 2017 02:52
Show Gist options
  • Save softpunch/387ca07852be3ab8d6588df2e4dd0e76 to your computer and use it in GitHub Desktop.
Save softpunch/387ca07852be3ab8d6588df2e4dd0e76 to your computer and use it in GitHub Desktop.
CSS Variable Timing Units Based on BPM
: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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment