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
|
@charset "utf-8";
// Built-In Modules
@use 'sass:math';
// Included Modules
@use 'strip-unit';
// ===================================================================
// px to em
// ===================================================================
@function px2em($px, $base: 16) {
@return math.div(strip-unit.strip-unit($px), strip-unit.strip-unit($base)) * 1em;
}
@function px2rem($px, $base: 16) {
@return math.div(strip-unit.strip-unit($px), strip-unit.strip-unit($base)) * 1rem;
}
// ===================================================================
// percent to px
// ========================================================n===========
@function percent2px($percent, $base: 16) {
@return strip-unit.strip-unit($base) * math.div(strip-unit.strip-unit($percent), 100) * 1px;
}
// ===================================================================
// percent to em
// ===================================================================
@function percent2em($percent, $base: 16) {
$ratio: math.div((strip-unit.strip-unit($percent), 100));
@return math.div(strip-unit.strip-unit($base) * $ratio, strip-unit.strip-unit($base)) * 1em;
}
@function percent2rem($percent, $base: 16) {
$ratio: math.div((strip-unit.strip-unit($percent), 100));
@return math.div((strip-unit.strip-unit($base) * $ratio), strip-unit.strip-unit($base)) * 1rem;
}
// ===================================================================
// em to px
// ===================================================================
@function em2px($em, $base: 16) {
@return strip-unit.strip-unit($em) * strip-unit.strip-unit($base) * 1px;
}
@function rem2px($rem, $base: 16) {
@return strip-unit.strip-unit($rem) * strip-unit.strip-unit($base) * 1px;
}
|
