@springernature/global-spacing v0.1.0

global-spacing

Exposes a global-spacing function that validates spacing units passed to it against a SASS list named $global-spacing.

This global-spacing package defines $global-spacing is an empty list, so must be redefined at either the brand or product level. For example:

$global-spacing: (
    5,
    10,
    15,
    20,
    40,
    60
);

The global-spacing() function takes up to 4 arguments, which represent the values you would normally pass when using shorthand spacing CSS properties.

Example usage

padding: global-spacing(5) outputs padding: 5px

margin: global-spacing(5, 5, 10) outputs margin: 5px 5px 10px

If any value passed to the global-spacing() function does not exist in the $global-spacing list, the function will return null.

What if I need a value not defined in the list?

$global-spacing is intended to improve consistency, not be a rigid ruleset. There are scenarios when the values in $global-spacing won't be suitable. For example, you may need to use a keyword value such as auto, inherit, unset, or you may need a specific numberic value because 'reasons'.

In those scenarios there are two options:

1) Use the shorthand and then overwrite the values as necessary

margin: global-spacing(5, 5, 10);
margin-right: auto;

2) Use the long hand

margin-top: global-spacing(5);
margin-right: auto;
margin-bottom: global-spacing(10);
margin-left: global-spacing(5);