Update SCSS and remove deprecation warnings.

Author: antoniandre

package.json

@@ -36,7 +36,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build --base /splitpanes/",
-    "build-bundle": "BUNDLE=true vite build && mv ./dist/style.css ./dist/splitpanes.css",
+    "build-bundle": "BUNDLE=true vite build",
     "serve": "vite preview --base /splitpanes/",
     "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag"
   },

src/scss/_base.scss

@@ -1,3 +1,5 @@
+@use './variables' as *;
+
 // Global.
 // --------------------------------------------------------
 * {

src/scss/_typography.scss

@@ -1,3 +1,5 @@
+@use './variables' as *;
+
 body {
   font: 14px 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

src/scss/examples.scss

@@ -1,4 +1,4 @@
-@import './variables';
+@use './variables' as *;
 
 .vueperslide {
   &__content-wrapper {

src/scss/index.scss

@@ -1,3 +1,2 @@
-@import './variables';
-@import './base';
-@import './typography';
+@forward './base';
+@forward './typography';

src/views/documentation.vue

@@ -1032,6 +1032,8 @@ const incrementNumber = (i) => {
 </script>
 
 <style lang="scss">
+@use 'sass:color';
+
 $primary-color: #42b983;
 $secondary-color: #78cfa8;
 
@@ -1088,8 +1090,8 @@ em.specs {
 // Vue Router example.
 //---------------
 .example-vue-router {
-  &.w-button--active {background-color: darken($primary-color, 10) !important;}
-  .router-link-active {color: darken($primary-color, 10);}
+  &.w-button--active {background-color: color.adjust($primary-color, $lightness: -10%) !important;}
+  .router-link-active {color: color.adjust($primary-color, $lightness: -10%);}
 }
 
 // Touch example.

vite.config.js

@@ -45,7 +45,8 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
-        additionalData: '@import "@/scss/_variables.scss";'
+        api: 'modern-compiler',
+        additionalData: '@use "@/scss/_variables.scss" as *;'
       }
     }
   },