/
_font.scss
129 lines (115 loc) · 3.27 KB
/
_font.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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
///
/// 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.
///
/// @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 z-rem(font-size, 1.3);
/// @include z-rem(padding, 20px);
/// }
///
@mixin z-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};
}
///
/// General font-face from webfont library
///
/// @link https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp spec
///
/// @param {String} $name
/// @param {String} $path
/// @param {String} $weight [null] - optional
/// @param {String} $style [null] - optional
/// @param {String} $weight [null] - optional
/// @param {List} $exts [eot woff2 woff ttf svg] - optional
///
/// @require {Function} strip-unit
///
/// @output
/// ```css
/// font-family: quote(<name>);
/// font-style: <style>;
/// font-weight: <weight>;
/// src: <parsed src>;
/// ```
///
/// @example
/// .selector {
/// @include z-font-face("Roboto", "./font/");
/// }
///
@mixin z-font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
$src: null;
$extmods: (
eot: "?",
svg: "#" + str-replace($name, " ", "_")
);
$formats: (
otf: "opentype",
ttf: "truetype"
);
@each $ext in $exts {
$extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
$format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
$src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
}
@font-face {
font-family: quote($name);
font-style: $style;
font-weight: $weight;
src: $src;
}
}