fix: scss @use as *

Strong-Potato · Jan 5, 2024 · fcc0eb3 · fcc0eb3
1 parent c2b0c2f
commit fcc0eb3
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 46 deletions.
diff --git a/src/components/GlobalNavigationBar/GlobalNavigationBar.module.scss b/src/components/GlobalNavigationBar/GlobalNavigationBar.module.scss
@@ -1,4 +1,4 @@
-@use "@/sass";
+@use "@/sass" as *;
 
 .container {
   position: fixed;

diff --git a/src/components/Review/Review.module.scss b/src/components/Review/Review.module.scss
@@ -1,10 +1,10 @@
-@use "@/sass";
+@use "@/sass" as *;
 
 .container {
   display: flex;
   gap: 8px;
   padding: 24px 20px;
-  border-bottom: 1px solid sass.$neutral100;
+  border-bottom: 1px solid $neutral100;
 
   &__contentsBox {
     width: 100%;
@@ -14,7 +14,7 @@
     gap: 4px;
 
     &__name {
-      @include sass.typography(button);
+      @include typography(button);
     }
 
     &__secondItems {
@@ -24,23 +24,23 @@
       &__star {
         display: inline;
         font-size: 1.6rem;
-        color: sass.$etc0;
+        color: $etc0;
       }
 
       &__point {
         margin-left: 2px;
-        @include sass.typography(captionSmall);
+        @include typography(captionSmall);
       }
 
       &__visitedAt {
         margin-left: 9px;
-        color: sass.$primary300;
-        @include sass.typography(captionSmall);
+        color: $primary300;
+        @include typography(captionSmall);
       }
     }
 
     &__content {
-      @include sass.typography(bodySmall);
+      @include typography(bodySmall);
       text-overflow: ellipsis;
     }
   }

diff --git a/src/pages/Detail/BottomFixedBtn/BottomFixedBtn.module.scss b/src/pages/Detail/BottomFixedBtn/BottomFixedBtn.module.scss
@@ -1,4 +1,5 @@
-@use "@/sass";
+@use "@/sass" as *;
+
 .container {
   position: fixed;
   bottom: 24px;
@@ -13,7 +14,7 @@
     align-items: center;
 
     width: 100%;
-    height: 48px;
+    height: 4.8rem;
 
     border-radius: 1.6rem;
 
@@ -22,8 +23,8 @@
     cursor: pointer;
 
     span {
-      color: sass.$neutral0;
-      @include sass.typography(button);
+      color: $neutral0;
+      @include typography(button);
     }
   }
 }
diff --git a/src/pages/Detail/Contents/Information/BasicInformation/BasicInformation.module.scss b/src/pages/Detail/Contents/Information/BasicInformation/BasicInformation.module.scss
@@ -1,16 +1,16 @@
-@use "@/sass";
+@use "@/sass" as *;
 
 .container {
   margin: 20px 0;
   padding-bottom: 40px;
 
-  border-bottom: 12px solid sass.$neutral100;
+  border-bottom: 12px solid $neutral100;
 
   &__title {
     padding: 8px 20px;
     margin-bottom: 16px;
 
-    @include sass.typography(titleMedium);
+    @include typography(titleMedium);
   }
 
   &__contents {
@@ -26,7 +26,7 @@
       align-items: center;
       gap: 12px;
 
-      @include sass.typography(tabLabel);
+      @include typography(tabLabel);
 
       a {
         text-decoration-line: underline;

diff --git a/src/pages/Detail/Contents/Information/Others/OtherCard/OtherCard.module.scss b/src/pages/Detail/Contents/Information/Others/OtherCard/OtherCard.module.scss
@@ -1,4 +1,4 @@
-@use "@/sass";
+@use "@/sass" as *;
 
 .container {
   display: flex;
@@ -15,12 +15,12 @@
 
   &__contents {
     h4 {
-      @include sass.typography(titleSmall);
+      @include typography(titleSmall);
     }
 
     p {
-      color: sass.$neutral400;
-      @include sass.typography(captionSmall);
+      color: $neutral400;
+      @include typography(captionSmall);
     }
 
     &__reviews {
@@ -30,18 +30,18 @@
       &__star {
         display: inline;
         font-size: 1.6rem;
-        color: sass.$etc0;
+        color: $etc0;
       }
 
       &__point {
         color: #1d2433;
-        @include sass.typography(captionSmall);
+        @include typography(captionSmall);
         margin-right: 4px;
       }
 
       &__reviewsCount {
-        color: sass.$neutral400;
-        @include sass.typography(captionSmall);
+        color: $neutral400;
+        @include typography(captionSmall);
       }
     }
   }

diff --git a/src/pages/Detail/Contents/Information/Others/Others.module.scss b/src/pages/Detail/Contents/Information/Others/Others.module.scss
@@ -1,4 +1,4 @@
-@use "@/sass";
+@use "@/sass" as *;
 
 .container {
   padding: 40px 0;
@@ -7,7 +7,7 @@
     padding: 8px 20px;
 
     h3 {
-      @include sass.typography(titleMedium);
+      @include typography(titleMedium);
     }
   }
 
@@ -21,7 +21,7 @@
       position: absolute;
       top: 50%;
       left: 10px;
-      transform: translate(-10px, -50%);
+      transform: translate(10px, -50%);
 
       width: 2.4rem;
       height: 2.4rem;

diff --git a/src/pages/Detail/Contents/Information/ShortReveiws/ShortReviews.module.scss b/src/pages/Detail/Contents/Information/ShortReveiws/ShortReviews.module.scss
@@ -1,8 +1,8 @@
-@use "@/sass";
+@use "@/sass" as *;
 
 .container {
   padding: 40px 0;
-  border-bottom: 12px solid sass.$neutral100;
+  border-bottom: 12px solid $neutral100;
 
   &__title {
     padding: 8px 20px;
@@ -12,15 +12,15 @@
     justify-content: space-between;
 
     h3 {
-      @include sass.typography(titleMedium);
+      @include typography(titleMedium);
     }
 
     &__rightBox {
       display: flex;
       cursor: pointer;
 
       span {
-        @include sass.typography(tabLabel);
+        @include typography(tabLabel);
       }
     }
   }
@@ -36,17 +36,17 @@
     &__star {
       display: inline;
       font-size: 3.2rem;
-      color: sass.$etc0;
+      color: $etc0;
     }
 
     &__point {
       color: #1d2433;
-      @include sass.typography(headline);
+      @include typography(headline);
     }
 
     &__reviewsCount {
-      color: sass.$neutral400;
-      @include sass.typography(tabLabel);
+      color: $neutral400;
+      @include typography(tabLabel);
     }
   }
 
@@ -59,7 +59,7 @@
 
     margin: 0 20px;
 
-    border: 1px solid sass.$neutral300;
+    border: 1px solid $neutral300;
     border-radius: 8px;
 
     display: flex;
@@ -69,7 +69,7 @@
     cursor: pointer;
 
     span {
-      @include sass.typography(button);
+      @include typography(button);
     }
   }
 }
diff --git a/src/pages/Detail/Main/Title/Title.module.scss b/src/pages/Detail/Main/Title/Title.module.scss
@@ -1,16 +1,16 @@
-@use "@/sass";
+@use "@/sass" as *;
 
 .container {
   width: 100%;
   padding: 24px 20px;
   position: relative;
 
   &__header {
-    @include sass.typography(titleLarge);
+    @include typography(titleLarge);
   }
   &__category {
-    color: sass.$neutral400;
-    @include sass.typography(captionSmall);
+    color: $neutral400;
+    @include typography(captionSmall);
     margin: 4px 0;
   }
 
@@ -22,17 +22,17 @@
     &__star {
       display: inline;
       font-size: 1.6rem;
-      color: sass.$etc0;
+      color: $etc0;
     }
 
     &__point {
       color: #1d2433;
-      @include sass.typography(captionMedium);
+      @include typography(captionMedium);
     }
 
     &__reviewsCount {
-      color: sass.$neutral400;
-      @include sass.typography(captionSmall);
+      color: $neutral400;
+      @include typography(captionSmall);
     }
   }