Advertisement
Guest User

Untitled

a guest
Apr 10th, 2019
101
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.29 KB | None | 0 0
  1. /// linear-interpolation
  2. /// Calculate the definition of a line between two points
  3. /// @param $map - A SASS map of viewport widths and size value pairs
  4. /// @returns A linear equation as a calc() function
  5. /// @example
  6. /// font-size: linear-interpolation((320px: 18px, 768px: 26px));
  7. /// @author Jake Wilson <jake.e.wilson@gmail.com>
  8. @function linear-interpolation($map) {
  9. $keys: map-keys($map);
  10. @if (length($keys) != 2) {
  11. @error "linear-interpolation() $map must be exactly 2 values";
  12. }
  13.  
  14. // The slope
  15. $m: (map-get($map, nth($keys, 2)) - map-get($map, nth($keys, 1)))/(nth($keys, 2) - nth($keys,1));
  16.  
  17. // The y-intercept
  18. $b: map-get($map, nth($keys, 1)) - $m * nth($keys, 1);
  19.  
  20. // Determine if the sign should be positive or negative
  21. $sign: "+";
  22. @if ($b < 0) {
  23. $sign: "-";
  24. $b: abs($b);
  25. }
  26.  
  27. @return calc(#{$m*100}vw #{$sign} #{$b});
  28. }
  29.  
  30.  
  31.  
  32.  
  33. /// map-sort
  34. /// Sort map by keys
  35. /// @param $map - A SASS map
  36. /// @returns A SASS map sorted by keys
  37. /// @requires function list-sort
  38. /// @author Jake Wilson <jake.e.wilson@gmail.com>
  39. @function map-sort($map) {
  40. $keys: list-sort(map-keys($map));
  41. $sortedMap: ();
  42. @each $key in $keys {
  43. $sortedMap: map-merge($sortedMap, ($key: map-get($map, $key)));
  44. }
  45. @return $sortedMap;
  46. }
  47.  
  48.  
  49.  
  50. /// list-sort
  51. /// Sort a SASS list
  52. /// @param $list - A SASS list
  53. /// @returns A sorted SASS list
  54. /// @requires function list-remove
  55. /// @author Jake Wilson <jake.e.wilson@gmail.com>
  56. @function list-sort($list) {
  57. $sortedlist: ();
  58. @while length($list) > 0 {
  59. $value: nth($list,1);
  60. @each $item in $list {
  61. @if $item < $value {
  62. $value: $item;
  63. }
  64. }
  65. $sortedlist: append($sortedlist, $value, 'space');
  66. $list: list-remove($list, index($list, $value));
  67. }
  68. @return $sortedlist;
  69. }
  70.  
  71.  
  72.  
  73. /// list-remove
  74. /// Remove an item from a list
  75. /// @param $list - A SASS list
  76. /// @param $index - The list index to remove
  77. /// @returns A SASS list
  78. /// @author Jake Wilson <jake.e.wilson@gmail.com>
  79. @function list-remove($list, $index) {
  80. $newList: ();
  81. @for $i from 1 through length($list) {
  82. @if $i != $index {
  83. $newList: append($newList, nth($list,$i), 'space');
  84. }
  85. }
  86. @return $newList;
  87. }
  88.  
  89.  
  90.  
  91. /// poly-fluid-sizing
  92. /// Generate linear interpolated size values through multiple break points
  93. /// @param $property - A string CSS property name
  94. /// @param $map - A Sass map of viewport unit and size value pairs
  95. /// @requires function linear-interpolation
  96. /// @requires function map-sort
  97. /// @example
  98. /// @include poly-fluid-sizing('font-size', (576px: 22px, 768px: 24px, 992px: 34px));
  99. /// @author Jake Wilson <jake.e.wilson@gmail.com>
  100. @mixin poly-fluid-sizing($property, $map) {
  101. // Get the number of provided breakpoints
  102. $length: length(map-keys($map));
  103.  
  104. // Error if the number of breakpoints is < 2
  105. @if ($length < 2) {
  106. @error "poly-fluid-sizing() $map requires at least 2 values"
  107. }
  108.  
  109. // Sort the map by viewport width (key)
  110. $map: map-sort($map);
  111. $keys: map-keys($map);
  112.  
  113. // Minimum size
  114. #{$property}: map-get($map, nth($keys,1));
  115.  
  116. // Interpolated size through breakpoints
  117. @for $i from 1 through ($length - 1) {
  118. @media (min-width:nth($keys,$i)) {
  119. $value1: map-get($map, nth($keys,$i));
  120. $value2: map-get($map, nth($keys,($i + 1)));
  121. // If values are not equal, perform linear interpolation
  122. @if ($value1 != $value2) {
  123. #{$property}: linear-interpolation((nth($keys,$i): $value1, nth($keys,($i+1)): $value2));
  124. } @else {
  125. #{$property}: $value1;
  126. }
  127. }
  128. }
  129.  
  130. // Maxmimum size
  131. @media (min-width:nth($keys,$length)) {
  132. #{$property}: map-get($map, nth($keys,$length));
  133. }
  134. }
  135.  
  136.  
  137.  
  138.  
  139. @mixin rem($property, $values) {
  140. $px: (); /* 3 */
  141. $rem: (); /* 3 */
  142.  
  143. @each $value in $values {
  144. /* 4 */
  145.  
  146. @if $value == 0 or $value == auto {
  147. /* 5 */
  148. $px: append($px, $value);
  149. $rem: append($rem, $value);
  150. } @else {
  151. $unit: unit($value); /* 6 */
  152. $val: parseInt($value); /* 6 */
  153.  
  154. @if $unit == 'px' {
  155. /* 7 */
  156. $px: append($px, $value);
  157. $rem: append($rem, ($val / 10 + rem));
  158. }
  159.  
  160. @if $unit == 'rem' {
  161. /* 7 */
  162. $px: append($px, ($val * 10 + px));
  163. $rem: append($rem, $value);
  164. }
  165. }
  166. }
  167.  
  168. @if $px == $rem {
  169. /* 8 */
  170. #{$property}: $px; /* 9 */
  171. } @else {
  172. #{$property}: $px; /* 9 */
  173. #{$property}: $rem; /* 9 */
  174. }
  175. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement