🛠️ 全面改用 Scss 编写样式

package.json

@@ -14,6 +14,7 @@
     "@astrojs/tailwind": "^5.1.0",
     "astro": "^4.1.1",
     "remixicon": "^4.0.1",
+    "sass": "^1.70.0",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animated": "^1.0.1",
     "typeit": "^8.8.3",

src/components/Menu.astro

@@ -44,16 +44,15 @@ const { includeHome = true } = Astro.props;
   </li>
 </ul>
 
-<style>
+<style lang="scss">
   ul {
     @apply inline-block;
-  }
-
-  li {
-    @apply inline-block ml-2;
-  }
 
-  li:first-child {
-    @apply ml-0 !important;
+    li {
+      @apply inline-block ml-2;
+      &:first-child {
+        @apply ml-0;
+      }
+    }
   }
 </style>

src/components/Rating.astro

@@ -2,7 +2,7 @@
 
 ---
 
-<div class="primary-color">
+<div class="primary-color mt-2">
   <div class="align-center">
     <span>感觉如何？</span>
     <div class="inline-flex px-2">
@@ -72,9 +72,9 @@
   });
 </script>
 
-<style>
-  i {
-    @apply p-1 text-xl text-gray-500;
+<style class="scss">
+  .star {
+    @apply px-1 text-xl;
   }
 
   .active {

src/components/bento/Bento.astro

@@ -207,46 +207,27 @@ import LearnMore from "./LearnMore.astro";
   <div id="bento-placeholder"></div>
 </div>
 
-<style>
-  @media (max-width: 319px) {
-    #bento-wrapper {
+<style lang="scss">
+  #bento-wrapper {
+    @media (max-width: 319px) {
       @apply hidden;
     }
   }
-  @media (min-width: 320px) {
-    #too-small-hint {
+
+  #too-small-hint {
+    @media (min-width: 320px) {
       @apply hidden;
     }
   }
 
   #bento-placeholder {
     padding-bottom: 500%;
-  }
-
-  @screen lg {
-    #bento-placeholder {
+    @screen lg {
       padding-bottom: 125%;
     }
   }
 
   h3 {
     @apply font-black;
   }
-
-  :global(.bento-border) {
-    @apply rounded-2xl shadow-md shadow-gray-200 dark:shadow-neutral-800;
-  }
-
-  :global(.bento-bg) {
-    @apply bg-white dark:bg-neutral-800;
-  }
-
-  :global(.clickable) {
-    @apply cursor-pointer transition-all;
-    @apply hover:bg-gray-200 dark:hover:bg-neutral-600;
-  }
-
-  :global(.clickable:active) {
-    transform: scale(0.98);
-  }
 </style>

src/components/bento/BgBox.astro

@@ -15,7 +15,7 @@ const { bg_image, dim = true } = Astro.props;
   <slot />
 </div>
 
-<style define:vars={{ bg_image }}>
+<style define:vars={{ bg_image }} lang="scss">
   #inner-wrapper {
     @apply bg-center bg-cover bg-no-repeat bg-blend-overlay text-white;
     background-image: var(--bg_image);