Magic Padding Sass Mixin. Adds padding to all four sides of an element. Replacing bottom padding with an :after psuedo element with top margin, giving the illusion of the bottom padding collapsing with the bottom margin of the last child within the element. @params $values Same as CSS shorthand for padding Example: 10px or 1em 10px or 10px 20px …

magic-padding.scss

//
// @file
// Magic Padding mixins.
//

// Replaces bottom padding with an :after psuedo element with top margin, giving
//  the illusion of the bottom padding collapsing with the bottom margin of the
//  last child within the element.
//
// @param $value
//    Any CSS measurement.

@mixin magic-padding-bottom($value) {
  &:after {
    content: '';
    display: block;
    margin-top: $value;
    height: .001em;
  }
}

//
// Adds padding to all four sides of an element. Replacing bottom padding with
//  an :after psuedo element with top margin.
//
// @param $values
//    Same as CSS shorthand padding.
//

@mixin magic-padding($values) {
  $length: length($values);
  $top: nth($values, 1);
  $right: $top;
  $bottom: $top;
  $left: $top;

  @if $length == 2 {
    $right: nth($values, 2);
    $left: $right;
  }

  @else if $length == 3 {
    $right: nth($values, 2);
    $bottom: nth($values, 3);
    $left: $right;
  }

  @else if $length >= 4 {
    $right: nth($values, 2);
    $bottom: nth($values, 3);
    $left: nth($values, 4);
  }

  padding: $top $right 0 $left;

  @include magic-padding-bottom($bottom);
}