-
Notifications
You must be signed in to change notification settings - Fork 2
/
app.scss
96 lines (84 loc) · 1.63 KB
/
app.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
@use 'sass:meta';
@use '../index' as * with (
$breakpoints: (
's': 640px,
'm': 768px,
// 'l': 1024px,
),
);
// .banana {
// @include variants('responsive' 'dark' 'hover' 'group-hover') {
// color: gold;
// }
// }
// body[season=spring],
// body[season=summer] {
// .banana {
// @include variants('responsive' 'hover' 'group-hover') {
// color: gold;
// }
// }
// }
// .banana {
// @include variants('responsive' 'hover' 'group-hover') {
// color: gold;
// }
// }
// @include variants('responsive' 'hover' 'group-hover', (base: 'banana', parent: 'body[season=winter]')) {
// color: brown;
// }
// .parent-one,
// .parent-two {
// .banana,
// .gold {
// @include variants('responsive' 'hover') {
// color: gold;
// }
// }
// }
$colors: (
'blue': (
100: #e5f1fd,
200: #b0d6f9,
300: #7bbaf6,
400: #469ff2,
500: #1183ee,
600: #0d66b9,
700: #094984,
800: #062c4f,
900: #020f1a,
)
);
// .text {
// @include options($colors, 'hover') using ($value) {
// color: $value;
// }
// }
// body[theme=default] {
// .text {
// @include options($colors, 'hover') using ($value) {
// color: $value;
// }
// }
// }
$config: (
'text': (
'blue': (
100: #e5f1fd,
200: #b0d6f9,
300: #7bbaf6,
400: #469ff2,
500: #1183ee,
600: #0d66b9,
700: #094984,
800: #062c4f,
900: #020f1a,
)
)
);
// @include options($config, 'hover') using ($value) {
// color: $value;
// }
// @include options($config, 'hover', (parent: 'body[theme=default]')) using ($value) {
// color: $value;
// }