_Mod.styl

$double-octave      = 4                 /* 4            */
$major-twelfth      = 3                 /* 3            */
$major-eleventh     = (8/3)             /* 2.666666667  */
$major-tenth        = (5/2)             /* 2.5          */
$octave             = 2                 /* 2            */
$major-seventh      = (15/8)            /* 1.875        */
$minor-seventh      = (16/9)            /* 1.777777778  */
$major-sixth        = (5/3)             /* 1.666666667  */
$golden             = 1.618034          /* 1.618034     */
$minor-sixth        = (8/5)             /* 1.6          */
$perfect-fifth      = (3/2)             /* 1.5          */
$augmented-fourth   = math(2, 'sqrt')   /* 1.41421      */
$perfect-fourth     = (4/3)             /* 1.333333333  */
$major-third        = (5/4)             /* 1.25         */
$minor-third        = (6/5)             /* 1.2          */
$major-second       = (9/8)             /* 1.125        */
$minor-second       = (16/15)           /* 1.066666667  */
      

Let Stylus do the math and store these variables for regular modular scale.

You can always make your own, or use these outside of the base scale for the app!

Modular scale: relative

$mod                = $major-second

ms(step, scale = $mod)
  result = scale

  if step > 1
    step = step - 1

    for i in (1..step)
      result = result * scale

  else if step < 0
    step = step + 1

    for i in (1..step)
      result = result / scale

  else if step == 0
    result = 1

  return result
    

Modular scale: Pixel value

mp(step, scale = $mod)
  result = scale

  if step > 1
    step = step - 1

    for i in (1..step)
      result = result * scale

  else if step < 0
    step = step + 1

    for i in (1..step)
      result = result / scale

  else if step == 0
    result = 1

  return result * $p
      

Font-size & line-height (req. px)

fs(px)
  font-size (px/$p)*1em
  font-size (px/$p)*1rem

  lh = $lh

  if lh/px < 1
    lh = $lh*1.5

  if lh/px < 1
    lh = $lh*2

  if lh/px < 1
    lh = $lh*2.5

  ...

  line-height (lh/px)