The base size for the spacing scale that will apply to cssVars[3]. Every step up the scale will double this, while every step down will halve it. Defaults to 1.
The CSS unit to use, like 'rem', 'em', or 'px'. Defaults to 'rem'.
import { setSpacingCssVars, cssVars, onEach, $} from 'aberdeen';
// Use default scale (0.25rem to 512rem)
setSpacingCssVars();
// Use custom base size
setSpacingCssVars(16, 'px'); // 4px to 8192px
// Use em units
setSpacingCssVars(1, 'em'); // 0.25em to 512em
// Show the last generated spacing values
onEach(cssVars, (value, key) => {
$(`div #${key} → ${value}`)
}, (value, key) => parseInt(key)); // Numeric sort
Initializes
cssVars[0]throughcssVars[12]with an exponential spacing scale.The scale is calculated as
2^(n-3) * base, providing values from0.25 * baseto512 * base.