[mantine.dev] Update Sass documentation for Vite with sass-embedded p…

…ackage (#7023)

apps/mantine.dev/src/pages/styles/sass.mdx

@@ -20,24 +20,29 @@ You can use Sass modules the same way as [CSS modules](/styles/css-modules):
 
 Install `sass`:
 
-<InstallScript packages="sass" dev />
+<InstallScript packages="sass-embedded" dev />
 
 Add mantine resources in your `vite.config.js` file:
 
 ```tsx
+import path from 'node:path';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
 export default defineConfig({
   plugins: [react()],
   css: {
     preprocessorOptions: {
       scss: {
-        additionalData: `@import "./src/_mantine";`,
+        api: 'modern-compiler',
+        additionalData: `@use "${path.join(process.cwd(), 'src/_mantine')}" as mantine;`,
       },
     },
   },
 });
 ```
 
-Create `_mantine.scss` file in your `src` folder:
+Create `src/_mantine.scss` file:
 
 ```scss
 @use 'sass:math';
@@ -111,24 +116,25 @@ All done! you can now use breakpoint variables, `rem` function, `hover`, `light`
 ```scss
 // example.module.scss
 .title {
+  // light-dark function is handled by PostCSS
   color: light-dark(
     var(--mantine-color-black),
     var(--mantine-color-white)
   );
-  font-size: rem(100px);
+  font-size: mantine.rem(100px);
   font-weight: 900;
-  letter-spacing: rem(-2px);
+  letter-spacing: mantine.rem(-2px);
 
-  @include light {
+  @include mantine.light {
     background-color: red;
   }
 
-  @include dark {
+  @include mantine.dark {
     background-color: blue;
   }
 
-  @include smaller-than($mantine-breakpoint-md) {
-    font-size: rem(50px);
+  @include mantine.smaller-than(mantine.$mantine-breakpoint-md) {
+    font-size: mantine.rem(50px);
   }
 }
 ```