Sass Space Generator

In all web project we need deferent spacing class for UI designing like marign-bottom: 15px or padding: 15px
This will help you to generate several spacing classes for margin and padding.

Eg: 'mt-0' , 'pl-5'

How to create

$spacing: 0, 5, 10, 15, 20; // Modify this to generate your spacing classes
$unit: px; // Modify this to specify your unit eg: em, pt, %.

$directions:(
  l: left,
  t: top,
  r: right,
  b: bottom,
  v: top,
  h: left
);
@mixin generateSpacing($prop, $short  ) {
   @each $space in $spacing{
    .#{$short}a-#{$space} { #{$prop}: $space + $unit}
    @each $key,$val in $directions{
      .#{$short}#{$key}-#{$space} {
        #{$prop}-#{$val}: $space + $unit;
        @if $key == v {
          #{$prop}-bottom: $space + $unit;
        }
        @if $key == h {
          #{$prop}-right: $space + $unit;
        }
      }
    }
  }
}
@include generateSpacing(padding , p);
@include generateSpacing(margin , m);

How to Use

If you are not using sass on your project, I have included a basic spacing.css on github, you can use this one.
Or else you can copy this code and and generate css using online sass compiler like SassMeister, Sass.js.

The first letter represents the spacing type ( Margin/Padding).

m : margin

p : padding

The second letter represents the direction.

l : left

r : right

t : top

b : bottom

v : vertical (top and bottom)

h : horizontal (left and right)

a : all

The third represents the spacing value (which you can give your own)

For eg: mb-0 means margin-bottom: 0;

Model

This will be the generated spacing class styling examples

Modify Spacing values

you can create your own spacing classes by modify the $spacing variable

$spacing: 0, 5, 10, 15, 20;

Modify Spacing unit

By modifying the $unit variable you can specify your unit eg: em, pt, % ...

$unit: px;