Skip to content

Commit e5ee13a

Browse files
mimosafamimosafa
committed
add sass variables and clean
1 parent 3aebe10 commit e5ee13a

File tree

12 files changed

+73
-42
lines changed

12 files changed

+73
-42
lines changed

‎src/components/global/footer/footer.scss

+26-16
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
#footer {
22
@include global-container;
3-
4-
background-size: cover;
5-
background-image: url("./img/footer_bg.jpg");
6-
background-repeat: no-repeat;
7-
background-position: 50% 0;
3+
4+
background: {
5+
size: cover;
6+
image: url("./img/footer_bg.jpg");
7+
repeat: no-repeat;
8+
position: 50% 0;
9+
}
810

911
.footer_inner {
1012
margin: 0 auto;
@@ -131,9 +133,11 @@
131133
}
132134

133135
> a {
134-
background-image: url("./img/footer_sitemap_tokyodo_ttl.png");
135-
background-repeat: no-repeat;
136-
background-position: 0 0;
136+
background: {
137+
image: url("./img/footer_sitemap_tokyodo_ttl.png");
138+
repeat: no-repeat;
139+
position: 0 0;
140+
}
137141

138142
@include kick-out-text;
139143

@@ -205,9 +209,11 @@
205209

206210
&:after {
207211
content: "";
208-
background-repeat: no-repeat;
209-
background-position: 50% 50%;
210-
background-size: 18px auto;
212+
background: {
213+
repeat: no-repeat;
214+
position: 50% 50%;
215+
size: 18px auto;
216+
}
211217
display: block;
212218
width: 18px;
213219
height: 18px;
@@ -279,15 +285,19 @@
279285

280286
&:before,
281287
&:after {
282-
background-image: url("./img/footer_sitemap_brand_sp.png");
283-
background-size: auto 45px;
288+
background: {
289+
image: url("./img/footer_sitemap_brand_sp.png");
290+
size: auto 45px;
291+
}
284292
}
285293
}
286294
@include desktop {
287295
&:before,
288296
&:after {
289-
background-image: url("./img/footer_sitemap_brand.png");
290-
background-size: auto 160px;
297+
background: {
298+
image: url("./img/footer_sitemap_brand.png");
299+
size: auto 160px;
300+
}
291301
}
292302
}
293303
}
@@ -365,7 +375,7 @@
365375
// Credit
366376
//
367377
.footer_credit {
368-
background-color: #000;
378+
background-color: $black;
369379
text-align: center;
370380

371381
@include phone {

‎src/components/global/footer/footer.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,4 @@ export default {
4545
};
4646
</script>
4747

48-
<style src="./footer.scss" lang="scss" scoped />
48+
<style src="./footer.scss" lang="scss" scoped></style>

‎src/components/global/header/header.scss

+16-12
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,11 @@
3232

3333
a {
3434
display: block;
35-
background-image: url("./img/header_site_ttl.png");
36-
background-repeat: no-repeat;
37-
background-position: 50% 50%;
35+
background: {
36+
image: url("./img/header_site_ttl.png");
37+
repeat: no-repeat;
38+
position: 50% 50%;
39+
}
3840

3941
@include kick-out-text;
4042

@@ -59,7 +61,7 @@
5961
// Global navigation
6062
//
6163
.header_gnav {
62-
background-color: #fff;
64+
background-color: $_color-base;
6365
position: relative;
6466
z-index: 19999;
6567

@@ -104,7 +106,7 @@
104106
// Brands
105107
//
106108
.header_gnav_brand {
107-
//display: none;
109+
display: none;
108110
border-top: 1px solid #d9d9d9;
109111
position: relative;
110112
letter-spacing: -.4em;
@@ -260,7 +262,7 @@
260262
// Global menu
261263
//
262264
.header_gnav_menu {
263-
//display: none;
265+
display: none;
264266
border-top: 1px solid #d9d9d9;
265267
position: relative;
266268
letter-spacing: -.4em;
@@ -339,7 +341,7 @@
339341

340342
&:after {
341343
content: "";
342-
background-color: #333;
344+
background-color: $_font-color-primary;
343345
background-image: url("./img/icon_arrow.png");
344346
background-repeat: no-repeat;
345347
background-position: 50% 50%;
@@ -379,7 +381,7 @@
379381
letter-spacing: -.4em;
380382

381383
@include phone {
382-
//display: none;
384+
display: none;
383385
padding-bottom: 25px;
384386
margin-left: -20px;
385387
position: static;
@@ -415,9 +417,11 @@
415417
opacity: 1;
416418
}
417419

418-
background-image: url("./img/header_gnav_other.png");
419-
background-repeat: no-repeat;
420-
background-size: auto 35px;
420+
background: {
421+
image: url("./img/header_gnav_other.png");
422+
repeat: no-repeat;
423+
size: auto 35px;
424+
}
421425

422426
@include kick-out-text;
423427
}
@@ -483,7 +487,7 @@
483487
}
484488

485489
.header_gnav_btn_bar {
486-
background-color: #000;
490+
background-color: $black;
487491
display: inline-block;
488492
position: absolute;
489493
transition: .15s ease-in-out;

‎src/components/global/pagetop/pagetop.vue

+7-5
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,13 @@ export default {
4848
4949
a {
5050
display: block;
51-
border: 1px solid #fff;
52-
background-color: rgba(0, 0, 0, .8);
53-
background-image: url("./img/pagetop.png");
54-
background-repeat: no-repeat;
55-
background-position: 50% 50%;
51+
border: 1px solid $white;
52+
background: {
53+
color: rgba($black, .8);
54+
image: url("./img/pagetop.png");
55+
repeat: no-repeat;
56+
position: 50% 50%;
57+
}
5658
5759
@include kick-out-text;
5860

‎src/css/_index.scss

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1+
// @import "variable/variable";
12
@import "core/core";
23
@import "util/util";

‎src/css/core/base/_base.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ body {
99
height: 100%;
1010
}
1111
body {
12-
background-color: #fff;
12+
background-color: $_color-base;
1313
}
1414

1515
// Font
@@ -18,8 +18,8 @@ html {
1818
}
1919

2020
body {
21-
font-family: "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
22-
color: #333;
21+
font-family: $_font-family;
22+
color: $_font-color-primary;
2323
font-weight: 400;
2424
letter-spacing: .02em;
2525

@@ -101,7 +101,7 @@ h6 {
101101
// Links
102102
a {
103103
display: inline-block;
104-
color: #333;
104+
color: $_font-color-primary;
105105
text-decoration: none;
106106

107107
@include desktop {

‎src/css/core/base/_noscript.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.header_noscript {
2-
background-color: rgba(0, 0, 0, .8);
2+
background-color: rgba($black, .8);
33
width: 100%;
44
height: 35px;
55
line-height: 35px;

‎src/css/core/mixin/_media-query.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
@mixin phone {
2-
@media (max-width: 896px) {
2+
@media (max-width: $_desktop-min-width - 1px) {
33
@content;
44
}
55
}
66

77
@mixin desktop {
8-
@media (min-width: 897px) {
8+
@media (min-width: $_desktop-min-width) {
99
@content;
1010
}
1111
}

‎src/css/variable/_color.scss

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
$white: #fff;
2+
$black: #000;

‎src/css/variable/_variable.scss

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@import "color";
2+
3+
// Colors
4+
$_color-base: $white;
5+
6+
// Fonts
7+
$_font-family: "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
8+
$_font-color-primary: #333;
9+
10+
// Media query break point
11+
$_desktop-min-width: 897px;

‎src/layouts/web-frame.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export default {
7777
//
7878
.header_overlay {
7979
display: none;
80-
background-color: rgba(0, 0, 0, 0.8);
80+
background-color: rgba($black, 0.8);
8181
width: 100%;
8282
height: 100%;
8383
position: fixed;

‎webpack.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ module.exports = {
3737
loader: 'sass-resources-loader',
3838
options: {
3939
resources: [
40+
path.resolve(__dirname, 'src/css/variable/_variable.scss'),
4041
path.resolve(__dirname, 'src/css/core/mixin/_mixin.scss')
4142
]
4243
}

0 commit comments

Comments
 (0)