Responsive Type and spacing https://www.sassmeister.com/gist/b1726054dc9efbae24e911d3bc6bb758

SassMeister-input-HTML.html

<div class="h1">Header 1</div>
<div class="h2">Header 2</div>
<div class="h3">Header 3</div>
<div class="h4">Header 4</div>
<div class="h5">Header 5</div>
<div class="h">Header</div>
<div class="hxs">Header xs</div>

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

$base-font-size: 16;
$bp-700: 700/$base-font-size + 0rem;

$h1: 50/$base-font-size + 0rem;
$h2: 40/$base-font-size + 0rem;
$h3: 30/$base-font-size + 0rem;
$h4: 24/$base-font-size + 0rem;
$h5: 20/$base-font-size + 0rem;
$h: 16/$base-font-size + 0rem;
$hxs: 14/$base-font-size + 0rem;

// Font sizes on a smaller screen
$bp-h1: 24/$base-font-size + 0rem;
$bp-h2: 20/$base-font-size + 0rem;
$bp-h3: 20/$base-font-size + 0rem;
$bp-h4: 16/$base-font-size + 0rem;
$bp-h5: 16/$base-font-size + 0rem;
$bp-h: 16/$base-font-size + 0rem;
$bp-hxs: 16/$base-font-size + 0rem;


@mixin h1 {
  font-size: $bp-h1;
  line-height: 1.2;
  @media (min-width: $bp-700) {
    font-size: $h1;
  }
}
@mixin h2 {
  font-size: $bp-h2;
  @media (min-width: $bp-700) {
    font-size: $h2;
  }
}
@mixin h3 {
  font-size: $bp-h3;
  @media (min-width: $bp-700) {
    font-size: $h3;
  }
}
@mixin h4() {
  font-size: $bp-h4;
  @media (min-width: $bp-700) {
    font-size: $h4;
  }
}
@mixin h5() {
  font-size: $bp-h5;
  @media (min-width: $bp-700) {
    font-size: $h5;
  }
}
@mixin h() {
  font-size: $bp-h;
  @media (min-width: $bp-700) {
    font-size: $h;
  }
}
@mixin hxs {
  font-size: $bp-hxs;
  @media (min-width: $bp-700) {
    font-size: $hxs;
  }
}

@mixin animation($animate...) {
  $max: length($animate);
  $animations: '';

  @for $i from 1 through $max {
    $animations: #{$animations + nth($animate, $i)};

    @if $i < $max {
      $animations: #{$animations + ", "};
    }
  }
  -webkit-animation: $animations;
  -moz-animation:    $animations;
  -o-animation:      $animations;
  animation:         $animations;
}


@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}
@mixin arrow($direction, $color, $size, $position: false, $has_border: true, $size_border: 0, $color_innard: #fff) {
  &:before {
    @include _arrow($direction, $color, $size, $position);
  }

  @if $has_border == true {
    $position: true;
    &:after {
      @include _arrow($direction, $color_innard, $size, $position);

      @if $direction == 'top' {
        top: -($size + $size_border);
      }
      @else if $direction == 'bottom' {
        bottom: -($size - $size_border);
      }
      @else if $direction == 'left' {
        left: -($size_border);
      }
      @else if $direction == 'right' {
        right: -($size_border);
      }
    }
  }
}

.h1 {
  @include h1();
}
.h2 {
  @include h2();
}
.h3 {
  @include h3();
}
.h4 {
  @include h4();
}
.h5 {
  @include h5();
}
.h {
  @include h();
}
.hxs {
  @include hxs();
}

@mixin _arrow($direction, $color, $size, $position: false) {
  display: block;
  height: 0;
  width: 0;

  @if $position == true {
    content: "";
    position: absolute;

    @if $direction == 'top' {
      top: auto;
      bottom: 100%;
      left: 50%;
      right: auto;
      margin: 0 0 0 (-$size);
    }
    @else if $direction == 'bottom' {
      top: auto;
      bottom: (-$size);
      left: 50%;
      right: auto;
      margin: 0 0 (-$size) (-$size/2);
    }
    @else if $direction == 'left' {
      top: 50%;
      bottom: auto;
      left: auto;
      right: 100%;
      margin: (-$size) (-$size) 0 0;
    }
    @else if $direction == 'right' {
      top: 50%;
      bottom: auto;
      left: 100%;
      right: auto;
      margin: (-$size) 0 0 0;
    }
  }

  @if $direction == 'top' {
    border-top: $size solid transparent;
    border-bottom: $size solid $color;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
  }
  @else if $direction == 'right' {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
    border-right: $size solid transparent;
  }
  @else if $direction == 'bottom' {
    border-top: $size solid $color;
    border-bottom: $size solid transparent;
    border-right: $size solid transparent;
    border-left: $size solid transparent;
  }
  @else if $direction == 'left' {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid transparent;
    border-right: $size solid $color;
  }
  @else if $direction == 'top-left' {
    border-top: $size solid $color;
    border-right: $size solid transparent;
  }
  @else if $direction == 'top-right' {
    border-top: $size solid $color;
    border-left: $size solid transparent;
  }
  @else if $direction == 'bottom-left' {
    border-bottom: $size solid $color;
    border-right: $size solid transparent;
  }
  @else if $direction == 'bottom-right' {
    border-bottom: $size solid $color;
    border-left: $size solid transparent;
  }
}

@function brightness($color) {
  @if type-of($color) == color {
    @return (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) / 255 * 100%;
  }
  @else {
    @return unquote("brightness(#{$color})");
  }
}

@function contrast-color($color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: null) {
  @if $threshold {
    // Deprecated in Compass 0.13
    @warn "The $threshold argment to contrast-color is no longer needed and will be removed in the next release.";
  }
  @if $color == null {
    @return null;
  }
  @else {
    $color-brightness: brightness($color);
    $dark-text-brightness: brightness($dark);
    $light-text-brightness: brightness($light);
    @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
  }
}

@mixin contrasted($background-color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: null) {
  @if $threshold {
    // Deprecated in Compass 0.13
    @warn "The $threshold argment to contrasted is no longer needed and will be removed in the next release.";
  }
  background-color: $background-color;
  color: contrast-color($background-color, $dark, $light);
}

// ~PADDING AND MARGIN
//=========================================

$color-border-soft: #ccc;

// padding and margin
$space_sizes:
  (xl, 5rem),    //large
  (l, 2.5rem),    //large
  (m, 2rem),  //medium
  (d, 1.5rem),  //default
  (s, 0.5rem),  //small
  (xs, 0.25rem) //x-small
;
$orientation_list: (
  v,
  h
);
$direction_list: (
  (t, top),
  (r, right),
  (b, bottom),
  (l, left)
);

@each $space_sizes, $size in $space_sizes {
  .pa#{$space_sizes} {
    padding: 1rem;
    @media (min-width: $bp-700) {
      padding: $size;
    }
  }
  .ma#{$space_sizes} {
    margin: 1rem;
    @media (min-width: $bp-700) {
      margin: $size;
    }
  }
}
@each $direction_list, $direction in $direction_list {
  @each $space_sizes, $size in $space_sizes {
    .p#{$direction_list}#{$space_sizes} {
      padding-#{$direction}: 1rem;
      @media (min-width: $bp-700) {
        padding-#{$direction}: $size;
      }
    }
    .m#{$direction_list}#{$space_sizes} {
      margin-#{$direction}: 1rem;
      @media (min-width: $bp-700) {
        margin-#{$direction}: $size;
      }
    }
  }
}
@each $orientation_list, $orientation in $orientation_list {
  @each $space_sizes, $size in $space_sizes {
    @if $orientation_list == "v" {
      .p#{$orientation_list}#{$space_sizes} {
        padding-bottom: 1rem;
        padding-top: 1rem;
        @media (min-width: $bp-700) {
          padding-bottom: $size;
          padding-top: $size;
        }
      }
      .m#{$orientation_list}#{$space_sizes} {
        margin-bottom: 1rem;
        margin-top: 1rem;
        @media (min-width: $bp-700) {
          margin-bottom: $size;
          margin-top: $size;
        }
      }
    }
    @else if $orientation_list == "h" {
      .p#{$orientation_list}#{$space_sizes} {
      padding-left: 1rem;
      padding-right: 1rem;
        @media (min-width: $bp-700) {
          padding-left: $size;
          padding-right: $size;
        }
      }
      .m#{$orientation_list}#{$space_sizes} {
        margin-left: 1rem;
        margin-right: 1rem;
        @media (min-width: $bp-700) {
          margin-left: $size;
          margin-right: $size;
        }
      }
    }
  }
}
// border
$border_sizes:
  (l, 5px), //large
  (m, 2px), //medium
  (d, 1px)  //normal
;

@each $border_sizes, $size in $border_sizes {
  .ba#{$border_sizes} {
    border: $size solid $color-border-soft;
  }
}
@each $direction_list, $direction in $direction_list {
  @each $border_sizes, $width in $border_sizes {
    @if $border_sizes != "" {
      .b#{$direction_list}#{$border_sizes} {
        border-#{$direction}: $width solid $color-border-soft;
      }
    }
    @else  {
      .b#{$direction_list} {
        border-#{$direction}: $width solid $color-border-soft;
      }
    }
  }
}
@each $orientation_list, $orientation in $orientation_list {
  @each $border_sizes, $size in $border_sizes {
    $hyphen: '';
    @if $space_sizes != ''{
      $hyphen: '-';
    }
    @if $orientation_list == "v" {
      .b#{$orientation_list}#{$border_sizes} {
        border-bottom: $size;
        border-top: $size;
      }
    }
    @else if $orientation_list == "h" {
      .b#{$orientation_list}#{$border_sizes} {
        border-left: $size;
        border-right: $size;
      }
    }
  }
}

SassMeister-output.css

.h1 {
  font-size: 1.5rem;
  line-height: 1.2;
}
@media (min-width: 43.75rem) {
  .h1 {
    font-size: 3.125rem;
  }
}

.h2 {
  font-size: 1.25rem;
}
@media (min-width: 43.75rem) {
  .h2 {
    font-size: 2.5rem;
  }
}

.h3 {
  font-size: 1.25rem;
}
@media (min-width: 43.75rem) {
  .h3 {
    font-size: 1.875rem;
  }
}

.h4 {
  font-size: 1rem;
}
@media (min-width: 43.75rem) {
  .h4 {
    font-size: 1.5rem;
  }
}

.h5 {
  font-size: 1rem;
}
@media (min-width: 43.75rem) {
  .h5 {
    font-size: 1.25rem;
  }
}

.h {
  font-size: 1rem;
}
@media (min-width: 43.75rem) {
  .h {
    font-size: 1rem;
  }
}

.hxs {
  font-size: 1rem;
}
@media (min-width: 43.75rem) {
  .hxs {
    font-size: 0.875rem;
  }
}

.paxl {
  padding: 1rem;
}
@media (min-width: 43.75rem) {
  .paxl {
    padding: 5rem;
  }
}

.maxl {
  margin: 1rem;
}
@media (min-width: 43.75rem) {
  .maxl {
    margin: 5rem;
  }
}

.pal {
  padding: 1rem;
}
@media (min-width: 43.75rem) {
  .pal {
    padding: 2.5rem;
  }
}

.mal {
  margin: 1rem;
}
@media (min-width: 43.75rem) {
  .mal {
    margin: 2.5rem;
  }
}

.pam {
  padding: 1rem;
}
@media (min-width: 43.75rem) {
  .pam {
    padding: 2rem;
  }
}

.mam {
  margin: 1rem;
}
@media (min-width: 43.75rem) {
  .mam {
    margin: 2rem;
  }
}

.pad {
  padding: 1rem;
}
@media (min-width: 43.75rem) {
  .pad {
    padding: 1.5rem;
  }
}

.mad {
  margin: 1rem;
}
@media (min-width: 43.75rem) {
  .mad {
    margin: 1.5rem;
  }
}

.pas {
  padding: 1rem;
}
@media (min-width: 43.75rem) {
  .pas {
    padding: 0.5rem;
  }
}

.mas {
  margin: 1rem;
}
@media (min-width: 43.75rem) {
  .mas {
    margin: 0.5rem;
  }
}

.paxs {
  padding: 1rem;
}
@media (min-width: 43.75rem) {
  .paxs {
    padding: 0.25rem;
  }
}

.maxs {
  margin: 1rem;
}
@media (min-width: 43.75rem) {
  .maxs {
    margin: 0.25rem;
  }
}

.ptxl {
  padding-top: 1rem;
}
@media (min-width: 43.75rem) {
  .ptxl {
    padding-top: 5rem;
  }
}

.mtxl {
  margin-top: 1rem;
}
@media (min-width: 43.75rem) {
  .mtxl {
    margin-top: 5rem;
  }
}

.ptl {
  padding-top: 1rem;
}
@media (min-width: 43.75rem) {
  .ptl {
    padding-top: 2.5rem;
  }
}

.mtl {
  margin-top: 1rem;
}
@media (min-width: 43.75rem) {
  .mtl {
    margin-top: 2.5rem;
  }
}

.ptm {
  padding-top: 1rem;
}
@media (min-width: 43.75rem) {
  .ptm {
    padding-top: 2rem;
  }
}

.mtm {
  margin-top: 1rem;
}
@media (min-width: 43.75rem) {
  .mtm {
    margin-top: 2rem;
  }
}

.ptd {
  padding-top: 1rem;
}
@media (min-width: 43.75rem) {
  .ptd {
    padding-top: 1.5rem;
  }
}

.mtd {
  margin-top: 1rem;
}
@media (min-width: 43.75rem) {
  .mtd {
    margin-top: 1.5rem;
  }
}

.pts {
  padding-top: 1rem;
}
@media (min-width: 43.75rem) {
  .pts {
    padding-top: 0.5rem;
  }
}

.mts {
  margin-top: 1rem;
}
@media (min-width: 43.75rem) {
  .mts {
    margin-top: 0.5rem;
  }
}

.ptxs {
  padding-top: 1rem;
}
@media (min-width: 43.75rem) {
  .ptxs {
    padding-top: 0.25rem;
  }
}

.mtxs {
  margin-top: 1rem;
}
@media (min-width: 43.75rem) {
  .mtxs {
    margin-top: 0.25rem;
  }
}

.prxl {
  padding-right: 1rem;
}
@media (min-width: 43.75rem) {
  .prxl {
    padding-right: 5rem;
  }
}

.mrxl {
  margin-right: 1rem;
}
@media (min-width: 43.75rem) {
  .mrxl {
    margin-right: 5rem;
  }
}

.prl {
  padding-right: 1rem;
}
@media (min-width: 43.75rem) {
  .prl {
    padding-right: 2.5rem;
  }
}

.mrl {
  margin-right: 1rem;
}
@media (min-width: 43.75rem) {
  .mrl {
    margin-right: 2.5rem;
  }
}

.prm {
  padding-right: 1rem;
}
@media (min-width: 43.75rem) {
  .prm {
    padding-right: 2rem;
  }
}

.mrm {
  margin-right: 1rem;
}
@media (min-width: 43.75rem) {
  .mrm {
    margin-right: 2rem;
  }
}

.prd {
  padding-right: 1rem;
}
@media (min-width: 43.75rem) {
  .prd {
    padding-right: 1.5rem;
  }
}

.mrd {
  margin-right: 1rem;
}
@media (min-width: 43.75rem) {
  .mrd {
    margin-right: 1.5rem;
  }
}

.prs {
  padding-right: 1rem;
}
@media (min-width: 43.75rem) {
  .prs {
    padding-right: 0.5rem;
  }
}

.mrs {
  margin-right: 1rem;
}
@media (min-width: 43.75rem) {
  .mrs {
    margin-right: 0.5rem;
  }
}

.prxs {
  padding-right: 1rem;
}
@media (min-width: 43.75rem) {
  .prxs {
    padding-right: 0.25rem;
  }
}

.mrxs {
  margin-right: 1rem;
}
@media (min-width: 43.75rem) {
  .mrxs {
    margin-right: 0.25rem;
  }
}

.pbxl {
  padding-bottom: 1rem;
}
@media (min-width: 43.75rem) {
  .pbxl {
    padding-bottom: 5rem;
  }
}

.mbxl {
  margin-bottom: 1rem;
}
@media (min-width: 43.75rem) {
  .mbxl {
    margin-bottom: 5rem;
  }
}

.pbl {
  padding-bottom: 1rem;
}
@media (min-width: 43.75rem) {
  .pbl {
    padding-bottom: 2.5rem;
  }
}

.mbl {
  margin-bottom: 1rem;
}
@media (min-width: 43.75rem) {
  .mbl {
    margin-bottom: 2.5rem;
  }
}

.pbm {
  padding-bottom: 1rem;
}
@media (min-width: 43.75rem) {
  .pbm {
    padding-bottom: 2rem;
  }
}

.mbm {
  margin-bottom: 1rem;
}
@media (min-width: 43.75rem) {
  .mbm {
    margin-bottom: 2rem;
  }
}

.pbd {
  padding-bottom: 1rem;
}
@media (min-width: 43.75rem) {
  .pbd {
    padding-bottom: 1.5rem;
  }
}

.mbd {
  margin-bottom: 1rem;
}
@media (min-width: 43.75rem) {
  .mbd {
    margin-bottom: 1.5rem;
  }
}

.pbs {
  padding-bottom: 1rem;
}
@media (min-width: 43.75rem) {
  .pbs {
    padding-bottom: 0.5rem;
  }
}

.mbs {
  margin-bottom: 1rem;
}
@media (min-width: 43.75rem) {
  .mbs {
    margin-bottom: 0.5rem;
  }
}

.pbxs {
  padding-bottom: 1rem;
}
@media (min-width: 43.75rem) {
  .pbxs {
    padding-bottom: 0.25rem;
  }
}

.mbxs {
  margin-bottom: 1rem;
}
@media (min-width: 43.75rem) {
  .mbxs {
    margin-bottom: 0.25rem;
  }
}

.plxl {
  padding-left: 1rem;
}
@media (min-width: 43.75rem) {
  .plxl {
    padding-left: 5rem;
  }
}

.mlxl {
  margin-left: 1rem;
}
@media (min-width: 43.75rem) {
  .mlxl {
    margin-left: 5rem;
  }
}

.pll {
  padding-left: 1rem;
}
@media (min-width: 43.75rem) {
  .pll {
    padding-left: 2.5rem;
  }
}

.mll {
  margin-left: 1rem;
}
@media (min-width: 43.75rem) {
  .mll {
    margin-left: 2.5rem;
  }
}

.plm {
  padding-left: 1rem;
}
@media (min-width: 43.75rem) {
  .plm {
    padding-left: 2rem;
  }
}

.mlm {
  margin-left: 1rem;
}
@media (min-width: 43.75rem) {
  .mlm {
    margin-left: 2rem;
  }
}

.pld {
  padding-left: 1rem;
}
@media (min-width: 43.75rem) {
  .pld {
    padding-left: 1.5rem;
  }
}

.mld {
  margin-left: 1rem;
}
@media (min-width: 43.75rem) {
  .mld {
    margin-left: 1.5rem;
  }
}

.pls {
  padding-left: 1rem;
}
@media (min-width: 43.75rem) {
  .pls {
    padding-left: 0.5rem;
  }
}

.mls {
  margin-left: 1rem;
}
@media (min-width: 43.75rem) {
  .mls {
    margin-left: 0.5rem;
  }
}

.plxs {
  padding-left: 1rem;
}
@media (min-width: 43.75rem) {
  .plxs {
    padding-left: 0.25rem;
  }
}

.mlxs {
  margin-left: 1rem;
}
@media (min-width: 43.75rem) {
  .mlxs {
    margin-left: 0.25rem;
  }
}

.pvxl {
  padding-bottom: 1rem;
  padding-top: 1rem;
}
@media (min-width: 43.75rem) {
  .pvxl {
    padding-bottom: 5rem;
    padding-top: 5rem;
  }
}

.mvxl {
  margin-bottom: 1rem;
  margin-top: 1rem;
}
@media (min-width: 43.75rem) {
  .mvxl {
    margin-bottom: 5rem;
    margin-top: 5rem;
  }
}

.pvl {
  padding-bottom: 1rem;
  padding-top: 1rem;
}
@media (min-width: 43.75rem) {
  .pvl {
    padding-bottom: 2.5rem;
    padding-top: 2.5rem;
  }
}

.mvl {
  margin-bottom: 1rem;
  margin-top: 1rem;
}
@media (min-width: 43.75rem) {
  .mvl {
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
  }
}

.pvm {
  padding-bottom: 1rem;
  padding-top: 1rem;
}
@media (min-width: 43.75rem) {
  .pvm {
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
}

.mvm {
  margin-bottom: 1rem;
  margin-top: 1rem;
}
@media (min-width: 43.75rem) {
  .mvm {
    margin-bottom: 2rem;
    margin-top: 2rem;
  }
}

.pvd {
  padding-bottom: 1rem;
  padding-top: 1rem;
}
@media (min-width: 43.75rem) {
  .pvd {
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
  }
}

.mvd {
  margin-bottom: 1rem;
  margin-top: 1rem;
}
@media (min-width: 43.75rem) {
  .mvd {
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
  }
}

.pvs {
  padding-bottom: 1rem;
  padding-top: 1rem;
}
@media (min-width: 43.75rem) {
  .pvs {
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
  }
}

.mvs {
  margin-bottom: 1rem;
  margin-top: 1rem;
}
@media (min-width: 43.75rem) {
  .mvs {
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
  }
}

.pvxs {
  padding-bottom: 1rem;
  padding-top: 1rem;
}
@media (min-width: 43.75rem) {
  .pvxs {
    padding-bottom: 0.25rem;
    padding-top: 0.25rem;
  }
}

.mvxs {
  margin-bottom: 1rem;
  margin-top: 1rem;
}
@media (min-width: 43.75rem) {
  .mvxs {
    margin-bottom: 0.25rem;
    margin-top: 0.25rem;
  }
}

.phxl {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 43.75rem) {
  .phxl {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

.mhxl {
  margin-left: 1rem;
  margin-right: 1rem;
}
@media (min-width: 43.75rem) {
  .mhxl {
    margin-left: 5rem;
    margin-right: 5rem;
  }
}

.phl {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 43.75rem) {
  .phl {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

.mhl {
  margin-left: 1rem;
  margin-right: 1rem;
}
@media (min-width: 43.75rem) {
  .mhl {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }
}

.phm {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 43.75rem) {
  .phm {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.mhm {
  margin-left: 1rem;
  margin-right: 1rem;
}
@media (min-width: 43.75rem) {
  .mhm {
    margin-left: 2rem;
    margin-right: 2rem;
  }
}

.phd {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 43.75rem) {
  .phd {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.mhd {
  margin-left: 1rem;
  margin-right: 1rem;
}
@media (min-width: 43.75rem) {
  .mhd {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
}

.phs {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 43.75rem) {
  .phs {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

.mhs {
  margin-left: 1rem;
  margin-right: 1rem;
}
@media (min-width: 43.75rem) {
  .mhs {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}

.phxs {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 43.75rem) {
  .phxs {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

.mhxs {
  margin-left: 1rem;
  margin-right: 1rem;
}
@media (min-width: 43.75rem) {
  .mhxs {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }
}

.bal {
  border: 5px solid #ccc;
}

.bam {
  border: 2px solid #ccc;
}

.bad {
  border: 1px solid #ccc;
}

.btl {
  border-top: 5px solid #ccc;
}

.btm {
  border-top: 2px solid #ccc;
}

.btd {
  border-top: 1px solid #ccc;
}

.brl {
  border-right: 5px solid #ccc;
}

.brm {
  border-right: 2px solid #ccc;
}

.brd {
  border-right: 1px solid #ccc;
}

.bbl {
  border-bottom: 5px solid #ccc;
}

.bbm {
  border-bottom: 2px solid #ccc;
}

.bbd {
  border-bottom: 1px solid #ccc;
}

.bll {
  border-left: 5px solid #ccc;
}

.blm {
  border-left: 2px solid #ccc;
}

.bld {
  border-left: 1px solid #ccc;
}

.bvl {
  border-bottom: 5px;
  border-top: 5px;
}

.bvm {
  border-bottom: 2px;
  border-top: 2px;
}

.bvd {
  border-bottom: 1px;
  border-top: 1px;
}

.bhl {
  border-left: 5px;
  border-right: 5px;
}

.bhm {
  border-left: 2px;
  border-right: 2px;
}

.bhd {
  border-left: 1px;
  border-right: 1px;
}

SassMeister-rendered.html

<div class="h1">Header 1</div>
<div class="h2">Header 2</div>
<div class="h3">Header 3</div>
<div class="h4">Header 4</div>
<div class="h5">Header 5</div>
<div class="h">Header</div>
<div class="hxs">Header xs</div>