- GitHub: [BonnierNews/dn-design-system/../web/src/foundations/helpers/spacing.scss](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/foundations/helpers/spacing.scss)
- Storybook: [Spacing > Base](https://designsystem.dn.se/?path=/story/foundations-spacing--base)
- Storybook: [Spacing > Detail](https://designsystem.dn.se/?path=/story/foundations-spacing--detail)

----

# Spacing

## use sass variable
To avoid silent centered changes use sass variable instead of raw token name.

Ex: `margin: ds-spacing($ds-s-050 0 $ds-s-sm)`

By using sass variables (instead of token name directly), if a spacing token used in scss is removed sass will not compile - which is a good thing!

By using sass variables for spacing tokens you will see which tokens are available through auto complete.

## ds-spacing | function

### Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|units | String | yes | one or more spacing tokens or `auto` or `0` or numeric value `14`| | $ds-s-050 0 $ds-s-sm 14 |
|sizeUnit | String | no | px, rem | px | |
|negative | bool | no | true, false | false | Applies to all units except for `auto` and `0` |

```scss
@use "@bonniernews/dn-design-system-web/foundations/helpers/forward.helpers.scss" as *;

.test-1 {
  margin: ds-spacing($ds-s-050 0 $ds-s-sm auto);
  padding: ds-spacing($ds-s-125 14);
}

// Outputs:
.test-1 {
  margin: 8px 0 var(--ds-spacing-px-page-horizontal) auto;
  padding: 20px 14px;
}

.test-2 {
  margin: ds-spacing($ds-s-050 0 $ds-s-sm auto, rem, true);
  padding: ds-spacing($ds-s-125 14, rem);
}

// Outputs:
.test-2 {
  margin: -0.5rem 0 var(--ds-spacing-negative-rem-page-horizontal) auto;
  padding: 1.25rem 0.875rem;
}
```