-
Notifications
You must be signed in to change notification settings - Fork 59
/
_rem.scss
83 lines (70 loc) · 2.07 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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
@use "sass:list";
@use "sass:map";
@use "sass:math";
@use "sass:meta";
$baseline: 16px !default;
$fallback: false !default;
$px-only: false !default;
// Dart Sass <1.33.0 compatibility
@function _divide($a, $b) {
@if map.has-key(meta.module-functions("math"), "div") {
@return math.div($a, $b);
}
@return $a / $b;
}
@function _convert($to, $values...) {
$result: ();
$separator: list.separator($values);
@each $value in $values {
@if meta.type-of($value) == "number" and math.unit($value) == "rem" and $to == "px" {
$result: list.append($result, _divide($value, 1rem) * $baseline, $separator);
} @else if meta.type-of($value) == "number" and math.unit($value) == "px" and $to == "rem" {
$result: list.append($result, _divide($value, $baseline) * 1rem, $separator);
} @else if meta.type-of($value) == "list" {
$result: list.append($result, _convert($to, $value...), $separator);
} @else {
$result: list.append($result, $value, $separator);
}
}
@return if(list.length($result) == 1, list.nth($result, 1), $result);
}
@function convert($values...) {
@if $px-only {
@return _convert(px, $values...);
} @else {
@return _convert(rem, $values...);
}
}
@mixin convert($properties, $values...) {
@if meta.type-of($properties) == "map" {
@each $property, $values in $properties {
@include convert($property, $values);
}
} @else {
@each $property in $properties {
@if $fallback or $px-only {
#{$property}: _convert(px, $values...);
}
@if not $px-only {
#{$property}: _convert(rem, $values...);
}
}
}
}
@mixin baseline($zoom: 100%) {
font-size: _divide($zoom, 16px) * $baseline;
}
// Proxy when used with a different namespace
@function rem($values...) {
@return convert($values...);
}
@mixin rem($properties, $values...) {
@include convert($properties, $values...);
}
// Proxy when imported globally
@function rem-convert($values...) {
@return convert($values...);
}
@mixin rem-convert($properties, $values...) {
@include convert($properties, $values...);
}