Skip to content

Commit ea70af1

Browse files
AbbanAbban
committed
Fix sass imports
- Change all sass @import directives to @use - Remove global sass:math configuration - Add sass:math where it's being used
1 parent acf3aa6 commit ea70af1

11 files changed

Lines changed: 75 additions & 89 deletions

File tree

‎src/App.vue‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,3 @@
1919
}
2020
} );
2121
</script>
22-
23-
<style lang="scss">
24-
@import 'src/assets/reset';
25-
@import 'src/assets/global';
26-
27-
#app {
28-
29-
}
30-
</style>

‎src/assets/global.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
@import "settings";
1+
@use "settings";
22

33
* {
4-
font-family: $font-family;
4+
font-family: settings.$font-family;
55
vertical-align: baseline;
66

77
-webkit-font-smoothing: antialiased;

‎src/components/Header.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,30 +19,30 @@
1919
</script>
2020

2121
<style lang="scss">
22-
@import "src/assets/settings";
22+
@use "../assets/settings";
2323
2424
.header {
2525
position: fixed;
2626
top: 0;
2727
width: 100%;
28-
height: $header-height;
28+
height: settings.$header-height;
2929
z-index: 99;
3030
3131
&--main {
32-
line-height: $header-height;
33-
height: $header-height;
34-
background: $header-background;
32+
line-height: settings.$header-height;
33+
height: settings.$header-height;
34+
background: settings.$header-background;
3535
}
3636
3737
a {
3838
text-decoration: none;
39-
color: $font-color-light;
39+
color: settings.$font-color-light;
4040
}
4141
}
4242
4343
.logo {
4444
font-weight: bold;
45-
color: $font-color-light;
45+
color: settings.$font-color-light;
4646
font-size: 20px;
4747
4848
&--icon {
@@ -52,7 +52,7 @@
5252
height: 27px;
5353
margin-top: 16px;
5454
margin-left: 15px;
55-
margin-right: calc($stage-gutter/2);
55+
margin-right: calc( #{ settings.$stage-gutter } / 2 );
5656
}
5757
}
5858
</style>

‎src/components/Sidebar.vue‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -100,30 +100,30 @@
100100
</script>
101101

102102
<style lang="scss">
103-
@import "src/assets/settings";
103+
@use "../assets/settings";
104104
105105
.sidebar {
106106
position: fixed;
107-
width: $sidebar-width;
107+
width: settings.$sidebar-width;
108108
height: 100%;
109-
left: -$sidebar-width;
110-
background: $sidebar-background;
109+
left: -#{ settings.$sidebar-width };
110+
background: settings.$sidebar-background;
111111
112-
transition: left $transition-ease;
112+
transition: left settings.$transition-ease;
113113
114114
&.is-visible {
115115
left: 0;
116116
}
117117
118118
&__content {
119-
margin-top: $header-height;
119+
margin-top: settings.$header-height;
120120
padding: 20px;
121121
}
122122
123123
&__button {
124-
background: $sidebar-button-background;
125-
color: $sidebar-button-color;
126-
font-family: $font-family;
124+
background: settings.$sidebar-button-background;
125+
color: settings.$sidebar-button-color;
126+
font-family: settings.$font-family;
127127
font-weight: bold;
128128
display: block;
129129
border: 0;
@@ -138,7 +138,7 @@
138138
left: 20px;
139139
140140
a {
141-
color: $font-color-light;
141+
color: settings.$font-color-light;
142142
}
143143
}
144144
@@ -149,7 +149,7 @@
149149
}
150150
151151
legend {
152-
color: $font-color-light;
152+
color: settings.$font-color-light;
153153
text-transform: uppercase;
154154
margin-bottom: 10px;
155155
}
@@ -161,10 +161,10 @@
161161
}
162162
163163
select {
164-
border: 1px solid $sidebar-background;
164+
border: 1px solid settings.$sidebar-background;
165165
width: 100%;
166166
padding: 10px;
167-
font-family: $font-family;
167+
font-family: settings.$font-family;
168168
169169
-moz-appearance: none;
170170
-webkit-appearance: none;
@@ -181,7 +181,7 @@
181181
}
182182
183183
&:focus {
184-
border-color: $sidebar-button-background;
184+
border-color: settings.$sidebar-button-background;
185185
outline: none;
186186
}
187187
}

‎src/components/SidebarToggle.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,26 @@
1616
</script>
1717

1818
<style lang="scss">
19-
@import "src/assets/settings";
19+
@use "../assets/settings";
2020
2121
.sidebar-toggle {
2222
border-collapse: collapse;
2323
position: fixed;
2424
display: block;
25-
top: $header-height;
25+
top: settings.$header-height;
2626
left: 0;
27-
height: $axis-size;
28-
width: $axis-size;
29-
background: $sidebar-toggle-background;
27+
height: settings.$axis-size;
28+
width: settings.$axis-size;
29+
background: settings.$sidebar-toggle-background;
3030
z-index: 99;
3131
border: 0;
3232
margin: 0;
3333
padding: 0;
3434
cursor: pointer;
35-
transition: left $transition-ease;
35+
transition: left settings.$transition-ease;
3636
3737
&.sidebar-is-visible {
38-
left: $sidebar-width;
38+
left: settings.$sidebar-width;
3939
}
4040
4141
&--icon {

‎src/components/Slideshow.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -92,22 +92,22 @@
9292
</script>
9393

9494
<style lang="scss">
95-
@import 'src/assets/settings';
95+
@use '../assets/settings';
9696
9797
.slideshow {
9898
position: fixed;
9999
top: 0;
100100
bottom: 0;
101101
left: 0;
102102
right: 0;
103-
background: $slideshow-background;
103+
background: settings.$slideshow-background;
104104
z-index: 100;
105-
color: $font-color-light;
105+
color: settings.$font-color-light;
106106
107107
visibility: hidden;
108108
transform: scale(1.2);
109109
opacity: 0;
110-
transition: transform $transition-ease, opacity $transition-ease, visibility $transition-ease;
110+
transition: transform settings.$transition-ease, opacity settings.$transition-ease, visibility settings.$transition-ease;
111111
112112
&.is-visible {
113113
visibility: visible;
@@ -119,7 +119,7 @@
119119
position: absolute;
120120
top: 0;
121121
left: 0;
122-
width: $sidebar-width;
122+
width: settings.$sidebar-width;
123123
height: 100%;
124124
background: #000;
125125
padding: 80px 20px 20px;
@@ -128,7 +128,7 @@
128128
&--screenshot {
129129
position: absolute;
130130
top: 0;
131-
left: $sidebar-width;
131+
left: settings.$sidebar-width;
132132
right: 0;
133133
height: 100%;
134134
overflow-y: auto;

‎src/components/Stage.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
</script>
3333

3434
<style lang="scss">
35-
@import "src/assets/settings";
35+
@use "../assets/settings";
3636
3737
.stage {
3838
position: fixed;
@@ -41,14 +41,14 @@
4141
left: 0;
4242
height: 100%;
4343
44-
transition: margin-left $transition-ease;
44+
transition: margin-left settings.$transition-ease;
4545
4646
&.sidebar-is-visible {
47-
margin-left: $sidebar-width;
47+
margin-left: settings.$sidebar-width;
4848
}
4949
5050
&--content {
51-
margin-top: $header-height + $axis-size;
51+
margin-top: settings.$header-height + settings.$axis-size;
5252
}
5353
}
5454
</style>

‎src/components/ValueRow.vue‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -65,42 +65,43 @@ export default defineComponent( {
6565
</script>
6666

6767
<style lang="scss">
68-
@import "src/assets/settings";
68+
@use "../assets/settings";
69+
@use "sass:math";
6970
7071
.row {
7172
position: relative;
7273
display: flex;
7374
flex-wrap: nowrap;
74-
padding-bottom: $row-padding;
75-
padding-left: $axis-size;
75+
padding-bottom: settings.$row-padding;
76+
padding-left: settings.$axis-size;
7677
7778
&:after {
7879
position: absolute;
7980
content: '';
80-
bottom: math.div($row-padding,2);
81+
bottom: math.div( settings.$row-padding, 2 );
8182
right: 0;
82-
left: $axis-size;
83-
border-bottom: 1px dashed $border-color;
83+
left: settings.$axis-size;
84+
border-bottom: 1px dashed settings.$border-color;
8485
}
8586
8687
&--label {
8788
position: absolute;
8889
top: 0;
8990
left: 0;
90-
background: $axis-background-color;
91-
width: $axis-size;
91+
background: settings.$axis-background-color;
92+
width: settings.$axis-size;
9293
height: 100%;
93-
color: $axis-color;
94-
padding-bottom: $row-padding;
94+
color: settings.$axis-color;
95+
padding-bottom: settings.$row-padding;
9596
9697
&-text {
9798
position: absolute;
9899
top: 50%;
99-
margin-top: -$axis-size;
100+
margin-top: -#{ settings.$axis-size };
100101
display: block;
101-
height: $axis-size;
102-
line-height: $axis-size;
103-
width: $axis-size;
102+
height: settings.$axis-size;
103+
line-height: settings.$axis-size;
104+
width: settings.$axis-size;
104105
text-align: center;
105106
white-space: nowrap;
106107
font-size: 16px;
@@ -116,11 +117,11 @@ export default defineComponent( {
116117
117118
118119
&-content {
119-
padding: 0 math.div($stage-gutter,2);
120+
padding: 0 math.div( settings.$stage-gutter, 2 );
120121
display: block;
121122
width: 100%;
122123
min-height: 100px;
123-
color: $font-color-dark;
124+
color: settings.$font-color-dark;
124125
text-decoration: none;
125126
text-align: center;
126127
}
@@ -156,8 +157,8 @@ export default defineComponent( {
156157
position: absolute;
157158
top: 0;
158159
height: 100%;
159-
left: math.div($stage-gutter,2);
160-
right: math.div($stage-gutter,2);
160+
left: math.div( settings.$stage-gutter, 2 );
161+
right: math.div( settings.$stage-gutter, 2 );
161162
background: #eeeeee;
162163
font-size: 12px;
163164

‎src/components/XAxisRow.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,25 +16,25 @@ export default {
1616
</script>
1717

1818
<style lang="scss">
19-
@import "src/assets/settings";
19+
@use "../assets/settings";
2020
2121
.x-axis-row {
2222
position: fixed;
23-
top: $header-height;
23+
top: settings.$header-height;
2424
right: 0;
2525
left: 0;
26-
background: $axis-background-color;
27-
height: $axis-size;
28-
line-height: $axis-size;
26+
background: settings.$axis-background-color;
27+
height: settings.$axis-size;
28+
line-height: settings.$axis-size;
2929
font-weight: normal;
3030
font-size: 16px;
31-
padding-left: $axis-size;
31+
padding-left: settings.$axis-size;
3232
z-index: 99;
3333
34-
transition: left $transition-ease;
34+
transition: left settings.$transition-ease;
3535
3636
&.sidebar-is-visible {
37-
left: $sidebar-width;
37+
left: settings.$sidebar-width;
3838
}
3939
}
4040

0 commit comments

Comments
 (0)