CSS Scale example

gistfile1.txt

/*
 * Scale CSS
 * =========
 *
 * API
 * ---
 *
 * Use an @import file to override the
 * `--ratio` variable.
 * Default is the golden ratio or phi
 *
 *
 */
:root {
  /*
   * Example: Uncomment the next line to try a different ratio
   * --ratio: 1.333;
   */
  /* Scale ratio and default */
  --r: var(--ratio, 1.618);
  /* Scale up */
  --base: 1;
  --up-1: calc(var(--r));
  --up-2: calc(var(--up-1) * var(--r));
  --up-3: calc(var(--up-2) * var(--r));
  --up-4: calc(var(--up-3) * var(--r));
  --up-5: calc(var(--up-4) * var(--r));
  --up-6: calc(var(--up-5) * var(--r));
  /* Scale down */
  --dwn-1: calc(--base / var(--r));
  --dwn-2: calc(var(--dwn-1) / var(--r));
  --dwn-3: calc(var(--dwn-2) / var(--r));
  --dwn-4: calc(var(--dwn-3) / var(--r));
  --dwn-5: calc(var(--dwn-4) / var(--r));
  --dwn-6: calc(var(--dwn-5) / var(--r));
}
/* EXAMPLE USAGE BELOW */
.xxl {
  font-size: var(--up-4)rem;
  line-height: calc(var(--up-4) * var(--r))rem;
}
.xl {
  font-size: var(--up-3)rem;
  line-height: calc(var(--up-3) * var(--r))rem;
}
.l {
  font-size: var(--up-2)rem;
  line-height: calc(var(--up-2) * var(--r))rem;
}
.m {
  font-size: var(--up-1)rem;
  line-height: calc(var(--up-1) * var(--r))rem;
}
.s {
  font-size: var(--base)rem;
  line-height: calc(var(--base) * var(--r))rem;
}
.xs {
  font-size: var(--dwn-1)rem;
  line-height: calc(var(--dwn-1) * var(--r))rem;
}
/* Add something like this to your html */
/*  
  <h1 class="xxl">Heading 1</h1>
  <h2 class="xl">Heading 2</h2>
  <h3 class="l">Heading 3</h3>
  <h4 class="m">Heading 4</h4>
  <h5 class="sm">Heading 5</h5>
  <h6 class="xs">Heading 5</h6>
*/

compiling it with:
rework-npm index.css | myth | cleancss -o bundle.css