Modular Scale

TODOS

• Add / comment on semantic properties (vertical-rhythm, gutter) and how to use

Notes

• A modular scale is a sequence of numbers that increment at regular intervals.
• The interval or ratio determines the “step” size.
• Using a modular scale ensures a harmonious relationship between all the numbers in the sequence.
• Used for type sizes and spacing (ie margin, padding, gap, etc)

You can use this tool to preview and generate modular scales

@use 'sass:math';

/**
 * Currently using the Major Third scale.
 * Reference: https://type-scale.com
*/
$ratio: 1.125;
$base-size: 16;

@function pow($number, $exponent) {
  $value: 1;

  @if $exponent > 0 {
    @for $i from 1 through $exponent {
      $value: $value * $number;
    }
  } @else if $exponent < 0 {
    @for $i from 1 through -$exponent {
      $value: math.div($value, $number);
    }
  }

  @return $value;
}

@function calc-rem($px) {
  @return math.div($px, $base-size);
}

/* prettier-ignore */
$sizes: (
  's-7': pow($ratio, -7), 
  's-6': pow($ratio, -6), 
  's-5': pow($ratio, -5), 
  's-4': pow($ratio, -4), 
  's-3': pow($ratio, -3), 
  's-2': pow($ratio, -2),
  's-1': pow($ratio, -1), 
  's0': 1,            
  's1': pow($ratio, 1),   
  's2': pow($ratio, 2),   
  's3': pow($ratio, 3),   
  's4': pow($ratio, 4),   
  's5': pow($ratio, 5),   
  's6': pow($ratio, 6),
  's7': pow($ratio, 7),   
  's8': pow($ratio, 8),   
  's9': pow($ratio, 9),   
  's10': pow($ratio, 10),
);

$global-sizes: (
  "vertical-rhythm": var(--s0),
  "gutter": var(--s0)
);