変数を移動

batora9 · batora9 · commit 5f9f13086c89 · 2024-04-08T16:59:55.000+09:00
diff --git a/src/app/_variables.scss b/src/app/_variables.scss
@@ -1,2 +1,7 @@
 $tablet-width: 768px;
-$pages-max-width: 1080px;
+$pages-max-width: 1080px;
+$hovering-color: #7FCC8F;
+$span-color: #47B660;
+$heroImage-change-width: 1280px;
+$header-change-width: 1200px;
+$background-color: #F1F1F1;
diff --git a/src/app/news/page.module.scss b/src/app/news/page.module.scss
@@ -1,30 +1,25 @@
 @use 'src/app/variables';
-$hovering-color: #7FCC8F;
-$span-color: #47B660;
-$heroImage-change-width: 1280px;
-$header-change-width: 1200px;
-$background-color: #F1F1F1;
 
 /* heroImageとヘッダーのpadding調整 */
-@media (min-width: $heroImage-change-width) {
+@media (min-width: variables.$heroImage-change-width) {
   .heroImage {
     height: 60vh;
   }
 }
 
-@media (max-width: $heroImage-change-width) {
+@media (max-width: variables.$heroImage-change-width) {
   .heroImage {
     height: 100%;
   } 
 }
 
-@media (max-width: $header-change-width) {
+@media (max-width: variables.$header-change-width) {
   .main {
     padding-top: 64px;
   }
 }
 
-@media (min-width: $header-change-width) {
+@media (min-width: variables.$header-change-width) {
   .main {
     padding-top: 72px;
   }
@@ -76,21 +71,21 @@ $background-color: #F1F1F1;
   
 .main {
   flex-direction: column;
-  background-color: $background-color;
+  background-color: variables.$background-color;
 }
 
 .container {
   display: flex;
   flex-direction: column;
-  background-color: $background-color;
+  background-color: variables.$background-color;
 }
 
 .hero {
   align-items: center;
   justify-content: center;
   display: flex;
   flex-direction: column;
-  background-color: $background-color;
+  background-color: variables.$background-color;
 }
 
 .breadcrumb {
diff --git a/src/app/page.module.scss b/src/app/page.module.scss
@@ -1,30 +1,25 @@
 @use 'src/app/variables';
-$hovering-color: #7FCC8F;
-$span-color: #47B660;
-$heroImage-change-width: 1280px;
-$header-change-width: 1200px;
-$background-color: #F1F1F1;
 
 /* heroImageとヘッダーのpadding調整 */
-@media (min-width: $heroImage-change-width) {
+@media (min-width: variables.$heroImage-change-width) {
   .heroImage {
     height: 60vh;
   }
 }
 
-@media (max-width: $heroImage-change-width) {
+@media (max-width: variables.$heroImage-change-width) {
   .heroImage {
     height: 100%;
   } 
 }
 
-@media (max-width: $header-change-width) {
+@media (max-width: variables.$header-change-width) {
   .main {
     padding-top: 64px;
   }
 }
 
-@media (min-width: $header-change-width) {
+@media (min-width: variables.$header-change-width) {
   .main {
     padding-top: 72px;
   }
@@ -211,21 +206,21 @@ $background-color: #F1F1F1;
 
 .main {
   flex-direction: column;
-  background-color: $background-color;
+  background-color: variables.$background-color;
 }
 
 .container {
   display: flex;
   flex-direction: column;
-  background-color: $background-color;
+  background-color: variables.$background-color;
 }
 
 .hero {
   align-items: center;
   justify-content: center;
   display: flex;
   flex-direction: column;
-  background-color: $background-color;
+  background-color: variables.$background-color;
 }
 
 .breadcrumb {
@@ -311,15 +306,15 @@ $background-color: #F1F1F1;
 }
 
 .breadcrumbLink:hover {
-  color: $hovering-color;
+  color: variables.$hovering-color;
 }
 
 .bold {
   font-weight: bold;
 }
 
 .span {
-  color: $span-color;
+  color: variables.$span-color;
 }
 
 .news {

Original file line number	Diff line number	Diff line change
`@@ -1,30 +1,25 @@`
`1`	`1`	`@use 'src/app/variables';`
`2`		`-$hovering-color: #7FCC8F;`
`3`		`-$span-color: #47B660;`
`4`		`-$heroImage-change-width: 1280px;`
`5`		`-$header-change-width: 1200px;`
`6`		`-$background-color: #F1F1F1;`
`7`	`2`
`8`	`3`	`/* heroImageとヘッダーのpadding調整 */`
`9`		`-@media (min-width: $heroImage-change-width) {`
	`4`	`+@media (min-width: variables.$heroImage-change-width) {`
`10`	`5`	`.heroImage {`
`11`	`6`	`height: 60vh;`
`12`	`7`	`}`
`13`	`8`	`}`
`14`	`9`
`15`		`-@media (max-width: $heroImage-change-width) {`
	`10`	`+@media (max-width: variables.$heroImage-change-width) {`
`16`	`11`	`.heroImage {`
`17`	`12`	`height: 100%;`
`18`	`13`	`}`
`19`	`14`	`}`
`20`	`15`
`21`		`-@media (max-width: $header-change-width) {`
	`16`	`+@media (max-width: variables.$header-change-width) {`
`22`	`17`	`.main {`
`23`	`18`	`padding-top: 64px;`
`24`	`19`	`}`
`25`	`20`	`}`
`26`	`21`
`27`		`-@media (min-width: $header-change-width) {`
	`22`	`+@media (min-width: variables.$header-change-width) {`
`28`	`23`	`.main {`
`29`	`24`	`padding-top: 72px;`
`30`	`25`	`}`
`@@ -76,21 +71,21 @@ $background-color: #F1F1F1;`
`76`	`71`
`77`	`72`	`.main {`
`78`	`73`	`flex-direction: column;`
`79`		`- background-color: $background-color;`
	`74`	`+ background-color: variables.$background-color;`
`80`	`75`	`}`
`81`	`76`
`82`	`77`	`.container {`
`83`	`78`	`display: flex;`
`84`	`79`	`flex-direction: column;`
`85`		`- background-color: $background-color;`
	`80`	`+ background-color: variables.$background-color;`
`86`	`81`	`}`
`87`	`82`
`88`	`83`	`.hero {`
`89`	`84`	`align-items: center;`
`90`	`85`	`justify-content: center;`
`91`	`86`	`display: flex;`
`92`	`87`	`flex-direction: column;`
`93`		`- background-color: $background-color;`
	`88`	`+ background-color: variables.$background-color;`
`94`	`89`	`}`
`95`	`90`
`96`	`91`	`.breadcrumb {`