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
84
85
|
$map: (
1: 1,
1px: 1px
);
foo {
a: map-get($map, 1);
b: map-get($map, 1px);
}
$type-scale: (
-15:0.066667rem,
-10:0.186rem,
-9:0.211rem,
-8:0.26rem,
-7:0.295rem,
-6:0.364rem,
-5:0.413rem,
-4:0.51rem,
-3:0.578rem,
-2:0.714rem,
-1:0.809rem,
0:1rem,
1:1.133rem,
2:1.4rem,
3:1.586rem,
4:1.96rem,
5:2.221rem,
6:2.744rem,
7:3.109rem,
8:3.842rem,
9:4.353rem,
10:5.378rem,
11:6.094rem,
12:7.53rem,
13:8.531rem,
14:10.541rem,
15:11.943rem,
16:14.758rem
);
@function get-size($size) {
@if map-has-key($type-scale, $size) {
@return map-get($type-scale, $size);
}
@warn "Not a valid size.";
@return null;
}
@function scale-size($rem-size, $steps) {
$size-key: get-key-for-value($type-scale, $rem-size);
@if $size-key {
$new-size: $size-key + $steps;
@return get-size($new-size);
}
@warn "Not able to find size for " + $rem-size;
@return null;
}
@function get-key-for-value($map, $value) {
@each $map-key, $map-value in $map {
@if $map-value == $value {
@return $map-key
}
}
@warn $value + " not found in " + $map;
@return null;
}
$h1-font-size: get-size(5);
h1 {
font-size: $h1-font-size;
small {
font-size: scale-size($h1-font-size, -2);
color: red;
}
}
|
