forked from drublic/Sass-Mixins
-
Notifications
You must be signed in to change notification settings - Fork 0
/
_rem.scss
77 lines (68 loc) · 2 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
///
/// Returns a number without unit.
///
/// Borrowed from https://github.com/zurb/foundation/blob/master/scss/foundation/_functions.scss
///
/// @param {Number} $value
///
/// @returns {Number} - 30px -> 30
///
@function strip-unit($value) {
@return $value / ($value * 0 + 1);
}
///
/// This mixin enables you to use the CSS3 value `rem`, which lets you define
/// property sizes based on the root element's font-size.
///
/// Outputs properties that use rem with a px fallback.
/// It also takes px values and converts them to rem.
///
/// @author drublic
///
/// @link http://caniuse.com/rem caniuse
/// @link http://www.w3.org/TR/css3-values/#relative0 spec
///
/// @param {String} $property
/// @param {List} $values
/// @param {Number} $default-font-size [16px] - optional
///
/// @require {Function} strip-unit
///
/// @output
/// ```css
/// <property>: <parsed value>px;
/// <property>: <parsed value>rem;
/// ```
///
/// @example
/// .selector {
/// @include x-rem(font-size, 1.3);
/// @include x-rem(padding, 20px);
/// }
///
@mixin x-rem ($property, $values, $main-font-size: 16px) {
// Empty list for all values in px
$px-values: ();
$rem-values: ();
// Iterate over entries
@each $value in $values {
// If the value is zero or of a type that doesn’t need conversion, return the value untouched
@if index(auto inherit initial none 0, $value) or type-of($value) != "number" {
$px-values: append($px-values, $value);
$rem-values: append($rem-values, $value);
// Otherwise convert it properly
} @else {
$unit: unit($value);
@if $unit == 'px' {
$px-values: append($px-values, #{strip-unit($value)} * 1px );
$rem-values: append($rem-values, (strip-unit($value) / strip-unit($main-font-size) * 1rem));
} @else {
$px-values: append($px-values, ($value * $main-font-size) );
$rem-values: append($rem-values, #{$value} * 1rem);
}
}
}
// Return the property and its list of converted values
#{$property}: #{$px-values};
#{$property}: #{$rem-values};
}