// directional-property mixins are shorthands // for writing properties like the following // // @include margin(null 0 10px); // —— // margin-right: 0; // margin-bottom: 10px; // margin-left: 0; // // - or - // // @include border-style(dotted null); // —— // border-top-style: dotted; // border-bottom-style: dotted; // // —— // // Note: You can also use false instead of null

@function collapse-directionals($vals) {

$output: null;

$A: nth( $vals, 1 );
$B: if( length($vals) < 2, $A, nth($vals, 2));
$C: if( length($vals) < 3, $A, nth($vals, 3));
$D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) ));

@if $A == 0 { $A: 0 }
@if $B == 0 { $B: 0 }
@if $C == 0 { $C: 0 }
@if $D == 0 { $D: 0 }

@if $A == $B and $A == $C and $A == $D { $output: $A          }
@else if $A == $C and $B == $D         { $output: $A $B       }
@else if $B == $D                      { $output: $A $B $C    }
@else                                  { $output: $A $B $C $D }

@return $output;

}

@function contains-falsy($list) {

@each $item in $list {
  @if not $item {
    @return true;
  }
}

@return false;

}

@mixin directional-property($pre, $suf, $vals) {

// Property Names
$top:    $pre + "-top"    + if($suf, "-#{$suf}", "");
$bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
$left:   $pre + "-left"   + if($suf, "-#{$suf}", "");
$right:  $pre + "-right"  + if($suf, "-#{$suf}", "");
$all:    $pre +             if($suf, "-#{$suf}", "");

$vals: collapse-directionals($vals);

@if contains-falsy($vals) {
  @if nth($vals, 1) { #{$top}: nth($vals, 1); }

  @if length($vals) == 1 {
    @if nth($vals, 1) { #{$right}: nth($vals, 1); }
  } @else {
    @if nth($vals, 2) { #{$right}: nth($vals, 2); }
  }

  // prop: top/bottom right/left
  @if length($vals) == 2 {
    @if nth($vals, 1) { #{$bottom}: nth($vals, 1); }
    @if nth($vals, 2) { #{$left}:   nth($vals, 2); }

  // prop: top right/left bottom
  } @else if length($vals) == 3 {
    @if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
    @if nth($vals, 2) { #{$left}:   nth($vals, 2); }

  // prop: top right bottom left
  } @else if length($vals) == 4 {
    @if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
    @if nth($vals, 4) { #{$left}:   nth($vals, 4); }
  }

// prop: top/right/bottom/left
} @else {
  #{$all}: $vals;
}

}

@mixin margin($vals…) {

@include directional-property(margin, false, $vals...);

}

@mixin padding($vals…) {

@include directional-property(padding, false, $vals...);

}

@mixin border-style($vals…) {

@include directional-property(border, style, $vals...);

}

@mixin border-color($vals…) {

@include directional-property(border, color, $vals...);

}

@mixin border-width($vals…) {

@include directional-property(border, width, $vals...);

}