_directional-values.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. // directional-property mixins are shorthands
  2. // for writing properties like the following
  3. //
  4. // @include margin(null 0 10px);
  5. // ------
  6. // margin-right: 0;
  7. // margin-bottom: 10px;
  8. // margin-left: 0;
  9. //
  10. // - or -
  11. //
  12. // @include border-style(dotted null);
  13. // ------
  14. // border-top-style: dotted;
  15. // border-bottom-style: dotted;
  16. //
  17. // ------
  18. //
  19. // Note: You can also use false instead of null
  20. @function collapse-directionals($vals) {
  21. $output: null;
  22. $A: nth( $vals, 1 );
  23. $B: if( length($vals) < 2, $A, nth($vals, 2));
  24. $C: if( length($vals) < 3, $A, nth($vals, 3));
  25. $D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) ));
  26. @if $A == 0 { $A: 0 }
  27. @if $B == 0 { $B: 0 }
  28. @if $C == 0 { $C: 0 }
  29. @if $D == 0 { $D: 0 }
  30. @if $A == $B and $A == $C and $A == $D { $output: $A }
  31. @else if $A == $C and $B == $D { $output: $A $B }
  32. @else if $B == $D { $output: $A $B $C }
  33. @else { $output: $A $B $C $D }
  34. @return $output;
  35. }
  36. @function contains-falsy($list) {
  37. @each $item in $list {
  38. @if not $item {
  39. @return true;
  40. }
  41. }
  42. @return false;
  43. }
  44. @mixin directional-property($pre, $suf, $vals) {
  45. // Property Names
  46. $top: $pre + "-top" + if($suf, "-#{$suf}", "");
  47. $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
  48. $left: $pre + "-left" + if($suf, "-#{$suf}", "");
  49. $right: $pre + "-right" + if($suf, "-#{$suf}", "");
  50. $all: $pre + if($suf, "-#{$suf}", "");
  51. $vals: collapse-directionals($vals);
  52. @if contains-falsy($vals) {
  53. @if nth($vals, 1) { #{$top}: nth($vals, 1); }
  54. @if length($vals) == 1 {
  55. @if nth($vals, 1) { #{$right}: nth($vals, 1); }
  56. } @else {
  57. @if nth($vals, 2) { #{$right}: nth($vals, 2); }
  58. }
  59. // prop: top/bottom right/left
  60. @if length($vals) == 2 {
  61. @if nth($vals, 1) { #{$bottom}: nth($vals, 1); }
  62. @if nth($vals, 2) { #{$left}: nth($vals, 2); }
  63. // prop: top right/left bottom
  64. } @else if length($vals) == 3 {
  65. @if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
  66. @if nth($vals, 2) { #{$left}: nth($vals, 2); }
  67. // prop: top right bottom left
  68. } @else if length($vals) == 4 {
  69. @if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
  70. @if nth($vals, 4) { #{$left}: nth($vals, 4); }
  71. }
  72. // prop: top/right/bottom/left
  73. } @else {
  74. #{$all}: $vals;
  75. }
  76. }
  77. @mixin margin($vals...) {
  78. @include directional-property(margin, false, $vals...);
  79. }
  80. @mixin padding($vals...) {
  81. @include directional-property(padding, false, $vals...);
  82. }
  83. @mixin border-style($vals...) {
  84. @include directional-property(border, style, $vals...);
  85. }
  86. @mixin border-color($vals...) {
  87. @include directional-property(border, color, $vals...);
  88. }
  89. @mixin border-width($vals...) {
  90. @include directional-property(border, width, $vals...);
  91. }