refactor(config): up sass version, move @import to @use method

src/app/layout.tsx

@@ -1,8 +1,8 @@
+import '@core/styles/reset.scss';
+import '@core/styles/globals.scss';
 import type { Metadata } from 'next';
 import { ReactNode } from 'react';
 import { Open_Sans } from 'next/font/google';
-import '@core/styles/reset.scss';
-import '@core/styles/globals.scss';
 import { Toaster } from 'react-hot-toast';
 import { ModalProvider } from '@core/providers/modal-provider';
 import { CookieNotice, YandexMetrika } from '@/widgets';

src/core/styles/_functions.scss

@@ -1,4 +1,7 @@
+// global imports via next.config.ts
+
 @use 'sass:math';
+@use 'variables' as *;
 
 @function rem($size) {
   $remSize: math.div($size, $base-font-size);

src/core/styles/_mixins.scss

@@ -1,3 +1,6 @@
+// global imports via next.config.ts
+@use 'variables' as *;
+
 @mixin onlymobile {
   @media (min-width: 0px) and (max-width: calc($tablet - 1px)) {
     @content;

src/core/styles/_variables.scss

@@ -1,4 +1,6 @@
-//frontend breakpoint
+// global imports via next.config.ts
+
+// frontend breakpoint
 $mobile: 360px;
 $tablet: 768px;
 $laptop: 1024px;

src/core/styles/globals.scss

@@ -1,3 +1,5 @@
+// global imports in app/layout.tsx
+
 :root {
   --background: #ffffff;
   --foreground: #333333;
@@ -27,3 +29,4 @@ a {
   color: inherit;
   text-decoration: none;
 }
+

src/core/styles/index.scss

@@ -1,3 +0,0 @@
-@import './variables.scss';
-@import './mixins.scss';
-@import './functions.scss';

src/core/styles/reset.scss

@@ -1,3 +1,5 @@
+// global imports in app/layout.tsx
+
 /* Reset and base styles  */
 * {
   padding: 0;