3 /// Builds directional properties by parsing CSS shorthand values. For example,
4 /// a value of `10px null` will output top and bottom directional properties,
5 /// but the `null` skips left and right from being output.
7 /// @argument {string} $property
10 /// @argument {string} $suffix
11 /// Suffix to append. Use `null` to omit.
13 /// @argument {list} $values
14 /// List of values to set for the property.
18 /// @include _directional-property(border, width, null 5px);
23 /// border-right-width: 5px;
24 /// border-left-width: 5px;
27 /// @require {function} _compact-shorthand
29 /// @require {function} _contains-falsy
33 @mixin _directional-property(
38 $top: $property + "-top" + if($suffix, "-#{$suffix}", "");
39 $bottom: $property + "-bottom" + if($suffix, "-#{$suffix}", "");
40 $left: $property + "-left" + if($suffix, "-#{$suffix}", "");
41 $right: $property + "-right" + if($suffix, "-#{$suffix}", "");
42 $all: $property + if($suffix, "-#{$suffix}", "");
44 $values: _compact-shorthand($values);
46 @if _contains-falsy($values) {
47 @if nth($values, 1) { #{$top}: nth($values, 1); }
49 @if length($values) == 1 {
50 @if nth($values, 1) { #{$right}: nth($values, 1); }
52 @if nth($values, 2) { #{$right}: nth($values, 2); }
55 @if length($values) == 2 {
56 @if nth($values, 1) { #{$bottom}: nth($values, 1); }
57 @if nth($values, 2) { #{$left}: nth($values, 2); }
58 } @else if length($values) == 3 {
59 @if nth($values, 3) { #{$bottom}: nth($values, 3); }
60 @if nth($values, 2) { #{$left}: nth($values, 2); }
61 } @else if length($values) == 4 {
62 @if nth($values, 3) { #{$bottom}: nth($values, 3); }
63 @if nth($values, 4) { #{$left}: nth($values, 4); }