# Spacing Utility Classes (SCSS)

> Generates margin and padding helper classes such as mt-2, mb-4 and px-3 from a spacing scale, to fine-tune block spacing with an extra CSS class.

- Type: SCSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: utilities, spacing, scss, blocks
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-spacing-utilities-scss/

## Code

```scss
$spacers: (
    0: 0,
    1: .25rem,
    2: .5rem,
    3: 1rem,
    4: 1.5rem,
    5: 3rem
);

$properties: (
    m: margin,
    p: padding
);

$sides: (
    t: top,
    b: bottom,
    l: left,
    r: right
);

@each $abbr, $property in $properties {
    @each $key, $size in $spacers {
        .#{$abbr}-#{$key} {
            #{$property}: $size !important;
        }

        .#{$abbr}x-#{$key} {
            #{$property}-left: $size !important;
            #{$property}-right: $size !important;
        }

        .#{$abbr}y-#{$key} {
            #{$property}-top: $size !important;
            #{$property}-bottom: $size !important;
        }

        @each $side-abbr, $side in $sides {
            .#{$abbr}#{$side-abbr}-#{$key} {
                #{$property}-#{$side}: $size !important;
            }
        }
    }
}
```

## Notes

Edit $spacers to change the scale. Add a class like mb-4 under Advanced > Additional CSS class(es).

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Spacing Utility Classes (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/