Update sass

package.json

@@ -18,7 +18,7 @@
     "@11ty/eleventy": "^3.0.0",
     "@11ty/eleventy-img": "^6.0.1",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.32.12"
+    "sass": "^1.86.3"
   },
   "dependencies": {
     "alpinejs": "^2.8.2"

src/scss/_global.scss

@@ -1,3 +1,5 @@
+@use "mixins";
+
 :root {
     --color-grey-100: #F9FAFB;
     --color-grey-200: #F3F4F6;
@@ -32,7 +34,7 @@ main {
 section {
     padding: 30px 0;
 
-    @include mq(medium) {
+    @include mixins.mq(medium) {
         padding: 60px 0;
     }
 }

src/scss/_mixins.scss

@@ -1,3 +1,6 @@
+@use "sass:string";
+@use "sass:map";
+
 $breakpoints-map: (
   small: "all and (min-width: 576px)",
   medium: "all and (min-width: 768px)",
@@ -9,11 +12,11 @@ $breakpoints-map: (
 // -------------------------------------
 @mixin mq($breakpoint-name) {
   // sanitize variable
-  $breakpoint-name: unquote($breakpoint-name);
+  $breakpoint-name: string.unquote($breakpoint-name);
 
   // check if passed name is in $breakpoints-map
-  @if map-has-key($breakpoints-map, $breakpoint-name) {
-    $breakpoint-query: map-get($breakpoints-map, $breakpoint-name);
+  @if map.has-key($breakpoints-map, $breakpoint-name) {
+    $breakpoint-query: map.get($breakpoints-map, $breakpoint-name);
 
     // write media query
     @media #{$breakpoint-query} {

src/scss/components/_recipe.scss

@@ -1,3 +1,5 @@
+@use "../mixins";
+
 .c-recipe__header-image {
     width: 100%;
     object-fit: cover;
@@ -36,7 +38,7 @@
     flex-direction: column;
     gap: 30px;
     
-    @include mq(medium) {
+    @include mixins.mq(medium) {
         display: grid;
         grid-template-columns: 400px 1fr;
         grid-template-rows: min-content 1fr;
@@ -52,7 +54,7 @@
     flex-wrap: wrap;
     gap: 12px;
 
-    @include mq(medium) {
+    @include mixins.mq(medium) {
         grid-area: tags;
         margin-bottom: 0;
     }
@@ -60,7 +62,7 @@
 
 
 .c-recipe__ingredients-wrapper {
-    @include mq(medium) {
+    @include mixins.mq(medium) {
         grid-area: ingredients;
     }
 }
@@ -83,7 +85,7 @@
 }
 
 .c-recipe__instructions-wrapper {
-    @include mq(medium) {
+    @include mixins.mq(medium) {
         grid-area: instructions;
     }
 }

src/scss/components/_search.scss

@@ -1,3 +1,5 @@
+@use "../mixins";
+
 .c-search__search-toggle {
     margin-left: 20px;
     padding: 10px;
@@ -31,7 +33,7 @@
     box-shadow: var(--shadow-xl);
     font-size: 1rem;
 
-    @include mq(medium) {
+    @include mixins.mq(medium) {
         max-width: 500px;
     }
 }

src/scss/main.scss

@@ -1,15 +1,15 @@
-@import "reset.scss";
-@import "mixins.scss";
-@import "utility.scss";
-@import "global.scss";
+@use "reset";
+@use "mixins";
+@use "utility";
+@use "global";
 
-@import "typography.scss";
-@import "layout.scss";
+@use "typography";
+@use "layout";
 
-@import "components/about.scss";
-@import "components/card.scss";
-@import "components/home.scss";
-@import "components/nav.scss";
-@import "components/recipe.scss";
-@import "components/recipe-tags.scss";
-@import "components/search.scss";
+@use "components/about";
+@use "components/card";
+@use "components/home";
+@use "components/nav";
+@use "components/recipe";
+@use "components/recipe-tags";
+@use "components/search";