chore: migrate sass imports to use (#49)

src/components/Header.astro

@@ -1,5 +1,5 @@
 <style lang="scss">
-	@import "../scss/_variables.scss";
+        @use "../scss/variables" as *;
 
 	header {
 		padding-bottom: 1rem;

src/components/PostElement.astro

@@ -12,7 +12,7 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"
 ---
 
 <style lang="scss">
-	@import "../scss/_variables.scss";
+        @use "../scss/variables" as *;
 
 	small {
 		font-size: $fontSizeBase * 0.75;

src/components/PostSummary.astro

@@ -12,7 +12,7 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"
 ---
 
 <style lang="scss">
-	@import "../scss/_variables.scss";
+        @use "../scss/variables" as *;
 
 	a {
 		color: $colorText;

src/pages/blog/[...slug].astro

@@ -23,7 +23,7 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"
 ---
 
 <style lang="scss">
-	@import "../../scss/_variables.scss";
+        @use "../../scss/variables" as *;
 
 	p {
 		opacity: 0.5;

src/scss/_framework.scss

@@ -1,3 +1,5 @@
+@use "variables" as *;
+
 *,
 *::after,
 *::before {

src/scss/global.scss

@@ -1,3 +1,3 @@
-@import "variables";
-@import "framework";
-@import "print";
+@use "variables";
+@use "framework";
+@use "print";