perf: 使用 %placeholder 代替 @mixin (#131)

8 files changed, 12 insertions, 12 deletions

diff --git a/src/layouts/LeftMode.vue b/src/layouts/LeftMode.vue
index db63931..dfeee09 100644
--- a/src/layouts/LeftMode.vue
+++ b/src/layouts/LeftMode.vue
@@ -51,7 +51,7 @@ const handleClickOutside = () => {
 $transition-time: 0.35s;
 
 .app-wrapper {
-  @include clearfix;
+  @extend %clearfix;
   position: relative;
   width: 100%;
 }
diff --git a/src/layouts/LeftTopMode.vue b/src/layouts/LeftTopMode.vue
index 4848b69..1102416 100644
--- a/src/layouts/LeftTopMode.vue
+++ b/src/layouts/LeftTopMode.vue
@@ -43,7 +43,7 @@ const layoutClasses = computed(() => {
 $transition-time: 0.35s;
 
 .app-wrapper {
-  @include clearfix;
+  @extend %clearfix;
   width: 100%;
 }
 
diff --git a/src/layouts/TopMode.vue b/src/layouts/TopMode.vue
index 87cf2bc..52f39a1 100644
--- a/src/layouts/TopMode.vue
+++ b/src/layouts/TopMode.vue
@@ -31,7 +31,7 @@ const { showTagsView, showLogo } = storeToRefs(settingsStore)
 $transition-time: 0.35s;
 
 .app-wrapper {
-  @include clearfix;
+  @extend %clearfix;
   width: 100%;
 }
 
diff --git a/src/layouts/components/AppMain.vue b/src/layouts/components/AppMain.vue
index ddab612..433ba9c 100644
--- a/src/layouts/components/AppMain.vue
+++ b/src/layouts/components/AppMain.vue
@@ -40,7 +40,7 @@ const settingsStore = useSettingsStore()
 .app-scrollbar {
   flex-grow: 1;
   overflow: auto;
-  @include scrollbar;
+  @extend %scrollbar;
   display: flex;
   flex-direction: column;
   .app-container-grow {
diff --git a/src/layouts/components/Settings/index.vue b/src/layouts/components/Settings/index.vue
index 1ba1b28..6fe47bd 100644
--- a/src/layouts/components/Settings/index.vue
+++ b/src/layouts/components/Settings/index.vue
@@ -74,7 +74,7 @@ watchEffect(() => {
     justify-content: space-between;
     align-items: center;
     .setting-name {
-      @include ellipsis;
+      @extend %ellipsis;
     }
   }
   .el-button {
diff --git a/src/layouts/components/Sidebar/index.vue b/src/layouts/components/Sidebar/index.vue
index f0b5be7..c74967c 100644
--- a/src/layouts/components/Sidebar/index.vue
+++ b/src/layouts/components/Sidebar/index.vue
@@ -77,7 +77,7 @@ const tipLineWidth = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-@mixin tip-line {
+%tip-line {
   &::before {
     content: "";
     position: absolute;
@@ -147,7 +147,7 @@ const tipLineWidth = computed(() => {
 
 :deep(.el-menu-item) {
   &.is-active {
-    @include tip-line;
+    @extend %tip-line;
   }
 }
 
@@ -155,7 +155,7 @@ const tipLineWidth = computed(() => {
   :deep(.el-sub-menu) {
     &.is-active {
       .el-sub-menu__title {
-        @include tip-line;
+        @extend %tip-line;
       }
     }
   }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 3df79fe..fb4938e 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -27,7 +27,7 @@ body {
   -webkit-font-smoothing: antialiased;
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial,
     sans-serif;
-  @include scrollbar;
+  @extend %scrollbar;
 }
 
 #app {
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
index acb091a..87d4e17 100644
--- a/src/styles/mixins.scss
+++ b/src/styles/mixins.scss
@@ -1,5 +1,5 @@
 /** 清除浮动 */
-@mixin clearfix {
+%clearfix {
   &::after {
     content: "";
     display: table;
@@ -8,7 +8,7 @@
 }
 
 /** 美化原生滚动条 */
-@mixin scrollbar {
+%scrollbar {
   // 整个滚动条
   &::-webkit-scrollbar {
     width: 8px;
@@ -32,7 +32,7 @@
 }
 
 /** 文本溢出时显示省略号 */
-@mixin ellipsis {
+%ellipsis {
   // 隐藏溢出的文本
   overflow: hidden;
   // 防止文本换行