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