Spacing
Function: pds.spacing
pds.spacing(name)
name- refers to a spacing name, like 'huge'
Example:
<![CDATA[
@use "...pds/pds";
h1 {
margin: pds.spacing(huge) pds.spacing(none);
}
]]>
Spacings are defined as a map, like
<![CDATA[
$spacings: (
none: 0,
tiny: 4px,
xxs: 8px,
xs: 12px,
s: 16px,
default: 20px,
m: 24px,
l: 32px,
xl: 48px,
xxl: 56px,
huge: 64px
);
]]>
You can override these spacings, or define your own, when configuring settings.css:
<![CDATA[
use "...pds/settings" with (
$assets-path: "...path-to-assets",
$custom-spacings: (
default: 20px,
gutter: 24px
)
);
...
@use "...pds/pds";
h1 {
margin: pds.spacing(default) pds.spacing(gutter);
}
]]>