/
_breakpoint.scss
executable file
·156 lines (120 loc) · 4.88 KB
/
_breakpoint.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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
@import "true";
@import '../../scss/util/unit';
@import '../../scss/util/breakpoint';
@include test-module('Breakpoint') {
@include test('Breakpoint (Named to Em) [function]') {
$test: breakpoint(medium);
$expect: '(min-width: 40em)';
@include assert-equal($test, $expect,
'Converts a named breakpoint to an em value');
}
@include test('Breakpoint (Rem/Px to Em) [function]') {
$expect: '(min-width: 1em)';
@include assert-equal(breakpoint(16px), $expect,
'Converts a pixel breakpoint to em');
@include assert-equal(breakpoint(1rem), $expect,
'Converts a rem breakpoint to em');
}
@include test('Breakpoint (Only Range) [function]') {
$test: breakpoint(medium only);
$expect: '(min-width: 40em) and (max-width: 63.9375em)';
$test-lowest: breakpoint(small only);
$expect-lowest: '(max-width: 39.9375em)';
$test-highest: breakpoint(xxlarge only);
$expect-highest: '(min-width: 90em)';
@include assert-equal($test, $expect,
'Creates a min/max-width range out of a named breakpoint');
@include assert-equal($test-lowest, $expect-lowest,
'Creates a max-width range if the breakpoint is the lowest');
@include assert-equal($test-highest, $expect-highest,
'Creates a min-width range if the breakpoint is the highest');
}
@include test('Breakpoint (Named Down Range) [function]') {
$test: breakpoint(medium down);
$expect: '(max-width: 63.9375em)';
@include assert-equal($test, $expect,
'Creates a down range out of a medium breakpoint');
$test-lowest: breakpoint(small down);
$expect-lowest: '(max-width: 39.9375em)';
@include assert-equal($test-lowest, $expect-lowest,
'Creates a down range out of a small breakpoint');
$test-highest: breakpoint(xxlarge down);
$expect-highest: '';
@include assert-equal($test-highest, $expect-highest,
'Skips media query creation for xxlarge down');
}
@include test('Breakpoint (Value Down Range) [function]') {
$expect: '(max-width: 1em)';
@include assert-equal(breakpoint(16px down), $expect,
'Creates a down range out of a pixel value');
@include assert-equal(breakpoint(1rem down), $expect,
'Creates a down range out of a rem value');
@include assert-equal(breakpoint(1em down), $expect,
'Creates a down range out of an em value');
}
@include test('Breakpoint (Empty String) [function]') {
$expect: '';
@include assert-equal(breakpoint(small up), $expect,
'Returns an empty string for the value small up');
@include assert-equal(breakpoint(0 down), $expect,
'Returns an empty string for the value 0 down');
@include assert-equal(breakpoint(0 up), $expect,
'Returns an empty string for the value 0 up');
}
@include test('Breakpoint (Orientation/Retina) [function]') {
@include assert-equal(breakpoint(landscape), '(orientation: landscape)',
'Creates special media query for landscape');
@include assert-equal(breakpoint(portrait), '(orientation: portrait)',
'Creates special media query for portrait');
@include assert-equal(breakpoint(retina), '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)',
'Creates special media query for retina');
}
@include test('Map Serialize [function]') {
$input: (
small: 1em,
medium: 2em,
large: 3em,
);
$test: -zf-bp-serialize($input);
$expect: 'small=1em&medium=2em&large=3em';
@include assert-equal($test, $expect,
'Converts a Sass map into a string');
}
@include test('Map Next [function]') {
$input: (
one: 'One',
two: 'Two',
three: 'Three',
);
$test_next: -zf-map-next($input, two);
$expect_next: map-get($input, three);
@include assert-equal($test_next, $expect_next,
'Returns the next value in a map');
$test_last: -zf-map-next($input, three);
$expect_last: null;
@include assert-equal($test_last, $expect_last,
'Returns null if the key is last in the map');
$test_null: -zf-map-next($input, four);
$expect_null: null;
@include assert-equal($test_null, $expect_null,
'Returns null if the key is not in the map');
}
@include test('Get Breakpoint Value [function]') {
$config: (
small: 0,
large: 1,
);
$test_kittens: -zf-get-bp-val($config, kittens);
$expect_kittens: null;
@include assert-equal($test_kittens, $expect_kittens,
'Given a non-existant breakpoint name, return null');
$test_match: -zf-get-bp-val($config, large);
$expect_match: 1;
@include assert-equal($test_match, $expect_match,
'Given a matching breakpoint, returns the exact value');
@include assert-equal(-zf-get-bp-val($config, medium), 0,
'Given a nearby breakpoint, returns the next lowest value');
@include assert-equal(-zf-get-bp-val($config, xlarge), 1,
'Given a nearby breakpoint, returns the next lowest value');
}
}