It’s not clear what the best way to define negative spacing is

[quis]

You can add spacing to a CSS property using mixins from GOV.UK Frontend, for example:

.example {
  margin-bottom: govuk-spacing(1)
}

The number (hereafter n) can be anything from 0–9, which outputs values from 0px to 60px (on large screens).

This works fine for increasing the spacing between stuff. However in CSS it’s also possible to give properties like margin or top negative values to move stuff in the opposite direction. It’s not clear what the best way to express this is using GOV.UK Frontend.

What doesn’t work

-govuk-spacing(n)

Presuming this is a limitation of SASS’s syntax. Results in margin-top: -govuk-spacing(1) in the outputted CSS.

What does work

- govuk-spacing(n) (note the space)

Feels fragile and not very explicit

-1 * govuk-spacing(n)

Feels a bit messy.

govuk-spacing(-n)

Feels nicest, but isn’t documented, so could break in the future.

[36degrees]

govuk-spacing(-n)

I'm surprised this works with the function as it's currently written – I'm getting an error if I try to use it like this:

Unknown spacing variable `-2`. Make sure you are using a point from the spacing scale in `_settings/spacing.scss`."?

[quis]

You’re right, I was checking the output was correct, not the console. So I was seeing the previous value preserved, but missing the error 🤦‍♂

[alex-ju]

In GOV.UK (govuk_publishing_components) we use - govuk-spacing() for specific properties and (- govuk-spacing()) in shorthand properties (as otherwise they end up being calculated).