| 1 |
/** |
| 2 |
* Convert font-size from px to rem with px fallback |
| 3 |
* |
| 4 |
* @param $size - the value in pixel you want to convert |
| 5 |
* |
| 6 |
* e.g. p font-size: fs-rem(12px); |
| 7 |
* e.g. p {@include fontSize(12px);} |
| 8 |
* |
| 9 |
*/ |
| 10 |
|
| 11 |
// Function for converting a px based font-size to rem. |
| 12 |
@function rem($size) { |
| 13 |
@return $size / 16px * 1rem; |
| 14 |
} |
| 15 |
|
| 16 |
// Font Responsive |
| 17 |
@function strip-unit($value) { |
| 18 |
@return $value / ($value * 0 + 1); |
| 19 |
} |
| 20 |
|
| 21 |
// Minimum breakpoint width. Null for the smallest (first) breakpoint. |
| 22 |
// |
| 23 |
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) |
| 24 |
// 576px |
| 25 |
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) { |
| 26 |
$min: map-get($breakpoints, $name); |
| 27 |
@return if($min !=0, $min, null); |
| 28 |
} |
| 29 |
|
| 30 |
// Maximum breakpoint width. |
| 31 |
// The maximum value is reduced by 0.02px to work around the limitations of |
| 32 |
// `min-` and `max-` prefixes and viewports with fractional widths. |
| 33 |
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max |
| 34 |
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. |
| 35 |
// See https://bugs.webkit.org/show_bug.cgi?id=178261 |
| 36 |
// |
| 37 |
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) |
| 38 |
// 767.98px |
| 39 |
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) { |
| 40 |
$max: map-get($breakpoints, $name); |
| 41 |
@return if($max and $max > 0, $max - .02, null); |
| 42 |
} |
| 43 |
|
| 44 |
|
