Efficiently manage margin and padding in CSS with this dynamic SCSS spacing module. Customizable spacing values and flexible side options make it easy to achieve consistent spacing throughout your web projects. Boost code reusability and streamline development with generated CSS classes, while maintaining scalability for future design needs. Imp…

spacing.scss

$spaces: (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 30, 40, 50, 100);
$sides: (
        "": "all",
        "t": "top",
        "b": "bottom",
        "l": "left",
        "r": "right",
        "tl": "top-left",
        "tr": "top-right",
        "bl": "bottom-left",
        "br": "bottom-right",
);
$units: 'rem';

@each $space in $spaces {
  @each $prefix, $value in $sides {
    $property: if($prefix == '', '', '-' + $value);
    .m#{$prefix}#{$space} {
      margin#{$property}: #{$space}#{$units} !important;
    }
    .p#{$prefix}#{$space} {
      padding#{$property}: #{$space}#{$units} !important;
    }
  }
}

/*
  Usage Example:

  1. Import the spacing module
  @import 'spacing';

  2. Apply spacing to an element
  <div class="m2">This div has a margin of 2rem on all sides.</div>

  3. Apply spacing to specific sides
  <div class="pt1 pr2 pb1 pl2">This div has padding of 1rem on the top and bottom and 2rem on the left and right sides.</div>

  4. Apply spacing to corners
  <div class="m-tl1 mtr1 mbl1 mbr1">This div has a margin of 1rem on the top-left and top-right corners, and bottom-left and bottom-right corners.</div>
*/