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.
Opens WPIDE on
Code
$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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.