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

src/layouts/LeftMode.vue

@@ -51,7 +51,7 @@ const handleClickOutside = () => {
 $transition-time: 0.35s;
 
 .app-wrapper {
-  @include clearfix;
+  @extend %clearfix;
   position: relative;
   width: 100%;
 }

src/layouts/LeftTopMode.vue

@@ -43,7 +43,7 @@ const layoutClasses = computed(() => {
 $transition-time: 0.35s;
 
 .app-wrapper {
-  @include clearfix;
+  @extend %clearfix;
   width: 100%;
 }
 

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%;
 }
 

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 {

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 {

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;
       }
     }
   }

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 {

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;
   // 防止文本换行