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)
);