feat(sass): improved css rules for new version of sass (#36)

assets/scss/_grid.scss

@@ -3,43 +3,51 @@
 }
 
 :root {
-    @each $breakpoint, $value in $grid-widths {
-        @if $breakpoint == 0 {
-            --grid-width: #{$value};
-        } @else {
-            @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
+    & {
+        @each $breakpoint, $value in $grid-widths {
+            @if $breakpoint == 0 {
                 --grid-width: #{$value};
+            } @else {
+                @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
+                    --grid-width: #{$value};
+                }
             }
         }
     }
 
-    @each $breakpoint, $value in $grid-max-widths {
-        @if $breakpoint == 0 {
-            --grid-max-width: #{$value};
-        } @else {
-            @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
+    & {
+        @each $breakpoint, $value in $grid-max-widths {
+            @if $breakpoint == 0 {
                 --grid-max-width: #{$value};
+            } @else {
+                @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
+                    --grid-max-width: #{$value};
+                }
             }
         }
     }
 
-    @each $breakpoint, $value in $grid-columns {
-        @if $breakpoint == 0 {
-            --grid-columns: #{$value};
-        } @else {
-            @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
+    & {
+        @each $breakpoint, $value in $grid-columns {
+            @if $breakpoint == 0 {
                 --grid-columns: #{$value};
+            } @else {
+                @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
+                    --grid-columns: #{$value};
+                }
             }
         }
     }
 
-    // Gutters
-    @each $breakpoint, $value in $gutters {
-        @if $breakpoint == 0 {
-            --gutter: #{$value};
-        } @else {
-            @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
+    & {
+        // Gutters
+        @each $breakpoint, $value in $gutters {
+            @if $breakpoint == 0 {
                 --gutter: #{$value};
+            } @else {
+                @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
+                    --gutter: #{$value};
+                }
             }
         }
     }

assets/scss/mixins/_grid.scss

@@ -1,11 +1,11 @@
 @mixin grid {
-    @include grid-gap;
-
     display: grid;
     width: var(--grid-width);
     max-width: var(--grid-max-width);
     margin: 0 auto;
     grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
+
+    @include grid-gap;
 }
 
 @mixin grid-gap {

components/molecules/VButton/VButton.vue

@@ -152,7 +152,6 @@ export default defineComponent({
 
 .root {
     @include v-button-default-css-vars($v-button);
-    @include theme-variants;
 
     position: var(--v-button-position, relative);
     display: var(--v-button-display, inline-flex);
@@ -165,6 +164,8 @@ export default defineComponent({
     color: var(--v-button-color, var(--theme-foreground-color));
     text-decoration: initial;
 
+    @include theme-variants;
+
     // PROPS STYLE
     &--icon-last {
         flex-direction: row-reverse;

nuxt.config.ts

@@ -72,6 +72,7 @@ export default defineNuxtConfig({
             preprocessorOptions: {
                 scss: {
                     additionalData: hoistUseStatements(`@import "~/assets/scss/_style-resources.scss";`),
+                    quietDeps: true,
                 },
             },
         },

package.json

@@ -37,7 +37,7 @@
         "nuxt": "^3.12.3",
         "postcss-html": "^1.7.0",
         "prettier": "^3.3.2",
-        "sass": "^1.77.7",
+        "sass": "^1.77.8",
         "stylelint": "^16.6.1",
         "stylelint-config-css-modules": "^4.4.0",
         "stylelint-config-idiomatic-order": "^10.0.0",