setSpacingCssVars

setSpacingCssVars(base?, unit?): void

Defined in: aberdeen.ts:2123

Initializes cssVars[0] through cssVars[12] with an exponential spacing scale.

The scale is calculated as 2^(n-3) * base, providing values from 0.25 * base to 512 * base.

Parameters

base?

number = 1

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.

unit?

string = 'rem'

The CSS unit to use, like ‘rem’, ‘em’, or ‘px’. Defaults to ‘rem’.

Returns

void

Example

import A from 'aberdeen';
// Use default scale (0.25rem to 512rem)
A.setSpacingCssVars();

// Use custom base size
A.setSpacingCssVars(16, 'px'); // 4px to 8192px

// Use em units
A.setSpacingCssVars(1, 'em'); // 0.25em to 512em

// Show the last generated spacing values
A.onEach(A.cssVars, (value, key) => {
    A(`div #${key} → ${value}`)
}, (value, key) => parseInt(key)); // Numeric sort