/
_rem.scss
65 lines (56 loc) · 1.76 KB
/
_rem.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
$rem-baseline: 10px !default;
$rem-fallback: true !default;
$rem-px-only: false !default;
// list-separator polyfill by Hugo Giraudel (https://sass-compatibility.github.io/#list_separator_function)
@function rem-separator($list) {
@if function-exists("list-separator") == true {
@return list-separator($list);
}
$test-list: ();
@each $item in $list {
$test-list: append($test-list, $item, space);
}
@return if($test-list == $list, space, comma);
}
@mixin rem-baseline($zoom: 100%) {
font-size: $zoom / 16px * $rem-baseline;
}
@function rem-convert($to, $values...) {
$result: ();
$separator: rem-separator($values);
@each $value in $values {
@if type-of($value) == "number" and unit($value) == "rem" and $to == "px" {
$result: append($result, $value / 1rem * $rem-baseline, $separator);
} @else if type-of($value) == "number" and unit($value) == "px" and $to == "rem" {
$result: append($result, $value / ($rem-baseline / 1rem), $separator);
} @else if type-of($value) == "list" {
$result: append($result, rem-convert($to, $value...), $separator);
} @else {
$result: append($result, $value, $separator);
}
}
@return $result;
}
@function rem($values...) {
@if $rem-px-only {
@return rem-convert(px, $values...);
} @else {
@return rem-convert(rem, $values...);
}
}
@mixin rem($properties, $values...) {
@if type-of($properties) == "map" {
@each $property in map-keys($properties) {
@include rem($property, map-get($properties, $property));
}
} @else {
@each $property in $properties {
@if $rem-fallback or $rem-px-only {
#{$property}: rem-convert(px, $values...);
}
@if not $rem-px-only {
#{$property}: rem-convert(rem, $values...);
}
}
}
}