| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 | // 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...);}
 |