_directional-values.scss (2699B)
1 @charset "UTF-8"; 2 3 /// Directional-property mixins are shorthands for writing properties like the following 4 /// 5 /// @ignore You can also use `false` instead of `null`. 6 /// 7 /// @param {List} $vals 8 /// List of directional values 9 /// 10 /// @example scss - Usage 11 /// .element { 12 /// @include border-style(dotted null); 13 /// @include margin(null 0 10px); 14 /// } 15 /// 16 /// @example css - CSS Output 17 /// .element { 18 /// border-bottom-style: dotted; 19 /// border-top-style: dotted; 20 /// margin-bottom: 10px; 21 /// margin-left: 0; 22 /// margin-right: 0; 23 /// } 24 /// 25 /// @require {function} contains-falsy 26 /// 27 /// @return {List} 28 29 @function collapse-directionals($vals) { 30 $output: null; 31 32 $a: nth($vals, 1); 33 $b: if(length($vals) < 2, $a, nth($vals, 2)); 34 $c: if(length($vals) < 3, $a, nth($vals, 3)); 35 $d: if(length($vals) < 2, $a, nth($vals, if(length($vals) < 4, 2, 4))); 36 37 @if $a == 0 { $a: 0; } 38 @if $b == 0 { $b: 0; } 39 @if $c == 0 { $c: 0; } 40 @if $d == 0 { $d: 0; } 41 42 @if $a == $b and $a == $c and $a == $d { $output: $a; } 43 @else if $a == $c and $b == $d { $output: $a $b; } 44 @else if $b == $d { $output: $a $b $c; } 45 @else { $output: $a $b $c $d; } 46 47 @return $output; 48 } 49 50 /// Output directional properties, for instance `margin`. 51 /// 52 /// @access private 53 /// 54 /// @param {String} $pre 55 /// Prefix to use 56 /// @param {String} $suf 57 /// Suffix to use 58 /// @param {List} $vals 59 /// List of values 60 /// 61 /// @require {function} collapse-directionals 62 /// @require {function} contains-falsy 63 64 @mixin directional-property($pre, $suf, $vals) { 65 // Property Names 66 $top: $pre + "-top" + if($suf, "-#{$suf}", ""); 67 $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", ""); 68 $left: $pre + "-left" + if($suf, "-#{$suf}", ""); 69 $right: $pre + "-right" + if($suf, "-#{$suf}", ""); 70 $all: $pre + if($suf, "-#{$suf}", ""); 71 72 $vals: collapse-directionals($vals); 73 74 @if contains-falsy($vals) { 75 @if nth($vals, 1) { #{$top}: nth($vals, 1); } 76 77 @if length($vals) == 1 { 78 @if nth($vals, 1) { #{$right}: nth($vals, 1); } 79 } @else { 80 @if nth($vals, 2) { #{$right}: nth($vals, 2); } 81 } 82 83 @if length($vals) == 2 { 84 @if nth($vals, 1) { #{$bottom}: nth($vals, 1); } 85 @if nth($vals, 2) { #{$left}: nth($vals, 2); } 86 } @else if length($vals) == 3 { 87 @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } 88 @if nth($vals, 2) { #{$left}: nth($vals, 2); } 89 } @else if length($vals) == 4 { 90 @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } 91 @if nth($vals, 4) { #{$left}: nth($vals, 4); } 92 } 93 } @else { 94 #{$all}: $vals; 95 } 96 }