Advertisement
Guest User

Untitled

a guest
Jun 11th, 2017
168
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.35 KB | None | 0 0
  1. /// poly-fluid-sizing
  2. /// Generate linear interpolated size values through multiple break points
  3. /// @param $property - A string CSS property name
  4. /// @param $map - A SASS map of viewport unit and size value pairs
  5. /// @requires function linear-interpolation
  6. /// @requires function map-sort
  7. /// @example
  8. /// @include poly-fluid-sizing('font-size', (576px: 22px, 768px: 24px, 992px: 34px));
  9. /// @author Jake Wilson <jake.e.wilson@gmail.com>
  10. @mixin poly-fluid-sizing($property, $map) {
  11. // Get the number of provided breakpoints
  12. $length: length(map-keys($map));
  13.  
  14. // Error if the number of breakpoints is < 2
  15. @if ($length < 2) {
  16. @error "poly-fluid-sizing() $map requires at least values"
  17. }
  18.  
  19. // Sort the map by viewport width (key)
  20. $map: map-sort($map);
  21. $keys: map-keys($map);
  22.  
  23. // Minimum size
  24. #{$property}: map-get($map, nth($keys,1));
  25.  
  26. // Interpolated size through breakpoints
  27. @for $i from 1 through ($length - 1) {
  28. @media (min-width:nth($keys,$i)) {
  29. #{$property}: linear-interpolation((nth($keys,$i): map-get($map, nth($keys,$i)), nth($keys,($i+1)): map-get($map, nth($keys,($i + 1)))));
  30. }
  31. }
  32.  
  33. // Maxmimum size
  34. @media (min-width:nth($keys,$length)) {
  35. #{$property}: map-get($map, nth($keys,$length));
  36. }
  37. }
  38.  
  39. /// linear-interpolation
  40. /// Calculate the definition of a line between two points
  41. /// @param $map - A SASS map of viewport widths and size value pairs
  42. /// @returns A linear equation as a calc() function
  43. /// @example
  44. /// font-size: linear-interpolation((320px: 18px, 768px: 26px));
  45. /// @author Jake Wilson <jake.e.wilson@gmail.com>
  46. @function linear-interpolation($map) {
  47. $keys: map-keys($map);
  48. @if (length($keys) != 2) {
  49. @error "linear-interpolation() $map must be exactly 2 values";
  50. }
  51. // The slope
  52. $m: (map-get($map, nth($keys, 2)) - map-get($map, nth($keys, 1)))/(nth($keys, 2) - nth($keys,1));
  53.  
  54. // The y-intercept
  55. $b: map-get($map, nth($keys, 1)) - $m * nth($keys, 1);
  56.  
  57. // Determine if the sign should be positive or negative
  58. $sign: "+";
  59. @if ($b < 0) {
  60. $sign: "-";
  61. $b: abs($b);
  62. }
  63.  
  64. @return calc(#{$m*100}vw #{$sign} #{$b});
  65. }
  66.  
  67. /// list-sort
  68. /// Sort a SASS list
  69. /// @param $list - A SASS list
  70. /// @returns A sorted SASS list
  71. /// @requires function list-remove
  72. /// @author Jake Wilson <jake.e.wilson@gmail.com>
  73. @function list-sort($list) {
  74. $sortedlist: ();
  75. @while length($list) > 0 {
  76. $value: nth($list,1);
  77. @each $item in $list {
  78. @if $item < $value {
  79. $value: $item;
  80. }
  81. }
  82. $sortedlist: append($sortedlist, $value, 'space');
  83. $list: list-remove($list, index($list, $value));
  84. }
  85. @return $sortedlist;
  86. }
  87.  
  88. /// map-sort
  89. /// Sort map by keys
  90. /// @param $map - A SASS map
  91. /// @returns A SASS map sorted by keys
  92. /// @requires function list-sort
  93. /// @author Jake Wilson <jake.e.wilson@gmail.com>
  94. @function map-sort($map) {
  95. $keys: list-sort(map-keys($map));
  96. $sortedMap: ();
  97. @each $key in $keys {
  98. $sortedMap: map-merge($sortedMap, ($key: map-get($map, $key)));
  99. }
  100. @return $sortedMap;
  101. }
  102.  
  103. /// list-remove
  104. /// Remove an item from a list
  105. /// @param $list - A SASS list
  106. /// @param $index - The list index to remove
  107. /// @returns A SASS list
  108. /// @author Jake Wilson <jake.e.wilson@gmail.com>
  109. @function list-remove($list, $index) {
  110. $newList: ();
  111. @for $i from 1 through length($list) {
  112. @if $i != $index {
  113. $newList: append($newList, nth($list,$i), 'space');
  114. }
  115. }
  116. @return $newList;
  117. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement