layout 变量全部改用 css var

src/assets/styles/globals.scss

@@ -1,3 +1,6 @@
+@use "./layout.scss" as *;
+@use "./themes.scss" as *;
+
 // 全局样式
 ::-webkit-scrollbar {
     width: 12px;

src/assets/styles/layout.scss

@@ -0,0 +1,14 @@
+// 全局变量
+:root {
+    // 头部宽度（默认自适应宽度，可固定宽度，固定宽度后为居中显示）
+    --g-header-width: 100%;
+    // 头部高度
+    --g-header-height: 70px;
+    // 侧边栏宽度
+    --g-main-sidebar-width: 70px;
+    --g-sub-sidebar-width: 220px;
+    // 侧边栏Logo高度
+    --g-sidebar-logo-height: 50px;
+    // 顶栏高度
+    --g-topbar-height: 50px;
+}

src/assets/styles/resources/layout.scss

@@ -1,17 +0,0 @@
-// 全局变量
-
-// 头部宽度（默认自适应宽度，可固定宽度，固定宽度后为居中显示）
-$g-header-width: 100%;
-// 头部高度
-$g-header-height: 70px;
-// 侧边栏Logo高度
-$g-sidebar-logo-height: 50px;
-// 顶部导航栏高度
-$g-topbar-height: 50px;
-
-// 全局变量
-:root {
-    // 侧边栏宽度
-    --g-main-sidebar-width: 70px;
-    --g-sub-sidebar-width: 220px;
-}

src/layout/components/Header/index.vue

@@ -44,12 +44,12 @@ header {
     display: flex;
     align-items: center;
     padding: 0 20px;
-    height: $g-header-height;
+    height: var(--g-header-height);
     color: var(--g-header-color);
     background-color: var(--g-header-bg);
     transition: background-color 0.3s, var(--el-transition-color);
     .header-container {
-        width: $g-header-width;
+        width: var(--g-header-width);
         height: 100%;
         margin: 0 auto;
         display: flex;
@@ -61,7 +61,7 @@ header {
             height: 100%;
         }
     }
-    @media screen and (max-width: $g-header-width) {
+    @media screen and (max-width: var(--g-header-width)) {
         .header-container {
             width: 100%;
         }
@@ -135,6 +135,6 @@ header {
 }
 .header-enter-from,
 .header-leave-to {
-    transform: translateY(-#{$g-header-height});
+    transform: translateY(calc(var(--g-header-height) * -1));
 }
 </style>

src/layout/components/Logo/index.vue

@@ -44,7 +44,7 @@ const to = computed(() => {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: $g-sidebar-logo-height;
+    height: var(--g-sidebar-logo-height);
     text-align: center;
     overflow: hidden;
     text-decoration: none;

src/layout/components/MainSidebar/index.vue

@@ -57,7 +57,7 @@ const switchMenu = inject('switchMenu')
     }
     .nav {
         width: inherit;
-        padding-top: $g-sidebar-logo-height;
+        padding-top: var(--g-sidebar-logo-height);
         .item {
             display: flex;
             align-items: center;

src/layout/components/SubSidebar/index.vue

@@ -86,7 +86,7 @@ function onSidebarScroll(e) {
     }
     .el-menu {
         border-right: 0;
-        padding-top: $g-sidebar-logo-height;
+        padding-top: var(--g-sidebar-logo-height);
         transition: border-color 0.3s, background-color 0.3s, color 0.3s, padding-top 0.3s;
         background-color: var(--g-sub-sidebar-bg);
         &:not(.el-menu--collapse) {

src/layout/components/Topbar/index.vue

@@ -78,7 +78,7 @@ function pathCompile(path) {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: $g-topbar-height;
+    height: var(--g-topbar-height);
     background-color: var(--g-toolbar-bg);
     transition: width 0.3s, top 0.3s, transform 0.3s, background-color 0.3s, var(--el-transition-box-shadow);
     &.fixed {

src/layout/index.vue

@@ -185,14 +185,14 @@ function switchMenu(index) {
             transition: 0.3s;
         }
         .topbar-container + .main {
-            margin: $g-topbar-height 0 0;
+            margin: var(--g-topbar-height) 0 0;
         }
     }
 }
 header:not(.header-leave-active) + .wrapper {
-    padding-top: $g-header-height;
+    padding-top: var(--g-header-height);
     .sidebar-container {
-        top: $g-header-height;
+        top: var(--g-header-height);
         :deep(.sidebar-logo) {
             display: none;
         }
@@ -202,7 +202,7 @@ header:not(.header-leave-active) + .wrapper {
     }
     .main-container {
         .topbar-container {
-            top: $g-header-height;
+            top: var(--g-header-height);
             :deep(.tools) {
                 display: none;
             }