Simple, copy-and-paste Sass utilities for general use (Tailwind? We don’t need no stinkin’ Tailwind)

sass-utils.scss

// ----------
// (G)rid
// ----------

$columns: 12; // change this to have something other than a 12-column grid

.grid {
  box-sizing: border-box;
  display: grid;
  grid-gap: 1.5rem; // default gutter size
  grid-template-columns: repeat($columns, 1fr);

  @for $i from 1 through $columns {
    &__col--#{$i} {
      grid-column: span $i;
    }
  }

  @for $i from 0 through 16 {
    &--#{$i} {
      grid-gap: #{$i / 2}rem; // adjust the gutter size
    }
  }
}

// Example (grid--2 sets the gutter size; higher # means bigger gutters):
//
// <div class="grid grid--2">
//   <div class="grid__col--4"></div>
//   <div class="grid__col--2"></div>
//   <div class="grid__col--6"></div>
// </div>
//
// Note: if you need a lot more specific grid adjustment, maybe just make a custom component :)

// ---------------------
//  (M)argin & (P)adding
// ---------------------

$directions: 'b' 'bottom', 'l' 'left', 't' 'top', 'r' 'right';
$max-size: 16;

@each $abbr, $direction in $directions {
  @for $i from 0 through $max-size {
    .m#{$abbr}#{$i} {
      margin-#{$direction}: #{$i/2}rem; // every increment is 1/2 rem, so assuming default 16px body size, 1 = 8px, 2 = 16px, …
    }
  }
}

@each $abbr, $direction in $directions {
  @for $i from 0 through $max-size {
    .p#{$abbr}#{$i} {
      padding-#{$direction}: #{$i/2}rem;
    }
  }
}

// Example:
//
// Header with no top margin and decent bottom margin:
// <h1 class="mt0 mb4"></h1>
//
// Container with left and right padding:
// <div class="pl3 pr3"></div>