From a4ee654cb2c43ed850879991d8765353cd185d16 Mon Sep 17 00:00:00 2001
From: Jeffrey Chen <78434827+TCOTC@users.noreply.github.com>
Date: Thu, 10 Jul 2025 17:27:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=86=20SCSS=20=E4=B8=AD=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E7=9A=84=20@import=20=E6=94=B9=E4=B8=BA=20@use=20(#15114)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 将 SCSS 中使用的 @import 改为 @use

* 更新 SCSS 相关依赖
---
 app/package.json                              |   8 +-
 app/src/assets/scss/_base-styles.scss         | 350 +++++++++++
 app/src/assets/scss/_mobile-styles.scss       | 509 ++++++++++++++++
 app/src/assets/scss/base.scss                 | 427 ++-----------
 app/src/assets/scss/business/_card.scss       |   4 +-
 app/src/assets/scss/business/_graph.scss      |   4 +-
 app/src/assets/scss/business/_search.scss     |   7 +-
 app/src/assets/scss/component/_card.scss      |   4 +-
 app/src/assets/scss/component/_form.scss      |  26 +-
 app/src/assets/scss/component/_list.scss      |  56 +-
 app/src/assets/scss/component/_menu.scss      |   7 +-
 .../assets/scss/component/_text-field.scss    |   6 +-
 .../assets/scss/component/_typography.scss    |   4 +-
 app/src/assets/scss/export.scss               |  24 +-
 app/src/assets/scss/mobile.scss               | 571 +-----------------
 app/src/assets/scss/pdf/_pdf.scss             |   2 +-
 .../scss/pdf/annotation_layer_builder.scss    |  12 +-
 app/src/assets/scss/pdf/pdf_viewer.scss       |   6 +-
 .../assets/scss/pdf/text_layer_builder.scss   |  12 +-
 app/src/assets/scss/pickr/pcr.scss            |   4 +-
 app/src/assets/scss/protyle/_protyle.scss     |   8 +-
 app/src/assets/scss/protyle/_wysiwyg.scss     |   6 +-
 app/src/assets/scss/util/_function.scss       |  60 +-
 23 files changed, 1085 insertions(+), 1032 deletions(-)
 create mode 100644 app/src/assets/scss/_base-styles.scss
 create mode 100644 app/src/assets/scss/_mobile-styles.scss

diff --git a/app/package.json b/app/package.json
index 7d152ae2d..70b4deb0b 100644
--- a/app/package.json
+++ b/app/package.json
@@ -56,8 +56,8 @@
     "@typescript-eslint/parser": "^8.15.0",
     "blueimp-md5": "^2.19.0",
     "clean-webpack-plugin": "^4.0.0",
-    "css-loader": "^6.7.1",
     "dayjs": "^1.11.5",
+    "css-loader": "^7.1.2",
     "electron": "37.2.0",
     "electron-builder": "26.0.12",
     "encoding": "^0.1.13",
@@ -69,14 +69,14 @@
     "html-webpack-plugin": "^5.5.0",
     "iconv-lite": "^0.6.3",
     "ifdef-loader": "^2.3.2",
-    "mini-css-extract-plugin": "2.7.6",
+    "mini-css-extract-plugin": "2.9.2",
     "path-browserify": "^1.0.1",
     "safer-buffer": "^2.1.2",
-    "sass": "^1.53.0",
-    "sass-loader": "^12.6.0",
     "typescript": "^4.7.4",
     "webpack": "^5.94.0",
     "webpack-bundle-analyzer": "^4.5.0",
+    "sass": "^1.89.2",
+    "sass-loader": "^16.0.5",
     "webpack-cli": "^4.10.0"
   },
   "dependencies": {
diff --git a/app/src/assets/scss/_base-styles.scss b/app/src/assets/scss/_base-styles.scss
new file mode 100644
index 000000000..b437e90c3
--- /dev/null
+++ b/app/src/assets/scss/_base-styles.scss
@@ -0,0 +1,350 @@
+@use "util/mixin" as *;
+
+/*
+.status: 2
+
+.protyle-util: 4
+
+.protyle-hint: 5
+
+.side-mask: 6
+
+Mobile #menu & .side-panel: 7
+
+.fullscreen: 8
+
+#windowControls: 9
+
+window.siyuan.zIndex: 10
+
+.b3-tooltips: 1000000
+*/
+
+html {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+
+.fullscreen {
+  position: fixed;
+  top: 0;
+  width: 100% !important;
+  left: 0;
+  height: 100vh !important;
+  z-index: 8;
+  border-radius: 0;
+
+  & > .protyle-breadcrumb,
+  & > .block__icons { // 关系图、card
+    padding-left: var(--b3-toolbar-left-mac);
+    height: 32px;
+    min-height: 32px;
+  }
+
+  .protyle-breadcrumb > .protyle-breadcrumb__space,
+  & > .block__icons > .fn__flex-1 {
+    -webkit-app-region: drag;
+    min-width: 32px;
+    height: 100%;
+    box-sizing: border-box;
+    border-radius: var(--b3-border-radius-b);
+
+    &:hover {
+      background-color: var(--b3-theme-surface-light);
+    }
+  }
+}
+
+
+.toolbar {
+  background-color: var(--b3-toolbar-background);
+  box-sizing: border-box;
+  height: 32px;
+  line-height: 32px;
+  padding: 0 5px 0 var(--b3-toolbar-left-mac);
+  overflow: hidden; // 最小化后右上角显示不全
+  border-bottom: .5px solid var(--b3-border-color);
+
+  &--browser {
+    padding-left: env(titlebar-area-x, 0);
+    padding-right: calc(100% - env(titlebar-area-width, 100%) - env(titlebar-area-x, 0));
+    height: calc(env(titlebar-area-height, 31px) + 1px);
+  }
+
+  #windowControls {
+    top: 0;
+    // https://github.com/siyuan-note/siyuan/issues/11275#issuecomment-2112416383
+    z-index: 9;
+    right: 0;
+    position: relative;
+    margin-left: 2px;
+  }
+
+  #drag {
+    -webkit-app-region: drag;
+    color: var(--b3-toolbar-color);
+    user-select: none;
+    text-align: center;
+    white-space: nowrap;
+    align-self: center;
+    font-size: 12px;
+    min-width: 148px;
+    box-sizing: border-box;
+  }
+
+  &__item {
+    flex-shrink: 0;
+    cursor: pointer;
+    color: var(--b3-toolbar-color);
+    padding: 5px;
+    margin: 2px;
+    border-radius: var(--b3-border-radius);
+    box-sizing: border-box;
+    transition: var(--b3-transition);
+    display: flex;
+    align-self: center;
+    background-color: transparent;
+    border: 0;
+    line-height: 13.5px;
+    height: 23.5px;
+
+    &:not(.toolbar__item--disabled):not(.toolbar__item--close):hover,
+    &--active {
+      background-color: var(--b3-toolbar-hover);
+      color: var(--b3-theme-on-background);
+    }
+
+    svg {
+      height: 13.5px;
+      width: 13.5px;
+    }
+
+    svg.toolbar__svg {
+      width: 8px;
+      height: 13.5px;
+      margin-left: 4px;
+      opacity: .54;
+    }
+
+    &--disabled {
+      opacity: .54;
+      cursor: not-allowed;
+    }
+
+    &--win {
+      padding: 9px;
+      margin: 0;
+      height: 31.5px;
+      border-radius: 0;
+    }
+
+    &--close {
+      padding: 9px 16px;
+      margin: 0;
+      height: 31.5px;
+      border-radius: 0;
+
+      svg {
+        width: 10px !important;
+      }
+
+      &:hover {
+        color: var(--b3-theme-on-error);
+        background-color: var(--b3-theme-error)
+      }
+    }
+  }
+
+  &__window {
+    position: fixed;
+    top: 0;
+    right: 0;
+    display: flex;
+    z-index: 502;
+
+    .toolbar__item {
+      padding: 14.25px;
+      height: auto;
+      margin: 0;
+      border-radius: 0;
+
+      &:not(.toolbar__item--disabled):not(.toolbar__item--close):hover,
+      &--active {
+        background-color: var(--b3-theme-background-light);
+      }
+    }
+  }
+
+  &__text {
+    font-size: 12px;
+    max-width: 96px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    user-select: none;
+  }
+}
+
+.status {
+  background-color: var(--b3-theme-surface);
+  box-sizing: border-box;
+  z-index: 2;
+  height: 32px;
+  line-height: 32px;
+  border-top: .5px solid var(--b3-border-color);
+  padding: 0 5px;
+
+  .toolbar__item {
+    color: var(--b3-theme-on-surface);
+
+    &:hover {
+      color: var(--b3-theme-on-background);
+      background-color: var(--b3-theme-background-light) !important;
+    }
+  }
+
+  &__msg {
+    color: var(--b3-theme-on-surface);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding-left: 5px;
+    font-size: 12px;
+  }
+
+  &__counter {
+    display: flex;
+    flex-shrink: 0;
+    font-size: 12px;
+  }
+
+  &__backgroundtask {
+    display: flex;
+    color: var(--b3-theme-on-surface);
+    font-size: 12px;
+
+    & > div {
+      height: 4px;
+      border-radius: var(--b3-border-radius);
+      overflow: hidden;
+      background-color: #fff;
+      width: 64px;
+      align-self: center;
+      margin: 0 8px 0 4px;
+      cursor: pointer;
+      flex-shrink: 0;
+
+      & > div {
+        background-color: var(--b3-theme-primary-light);
+        height: 4px;
+        background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
+        animation: stripMove 450ms linear infinite;
+        background-size: 50px 50px;
+      }
+    }
+  }
+
+  .fn__space:last-child {
+    width: 5px;
+  }
+}
+
+.asset {
+  overflow: auto;
+  box-sizing: border-box;
+  margin: 16px;
+
+  &--pdf {
+    margin: 0;
+    height: 100%;
+  }
+
+  img, video, audio, canvas {
+    max-width: 100%;
+  }
+}
+
+.file-tree {
+  &:hover .block__icons .block__icon:not([disabled]),
+  &.fullscreen .block__icons .block__icon:not([disabled]) {
+    opacity: 1;
+  }
+
+  &:hover .block__icons .block__icon[disabled] {
+    opacity: .38;
+  }
+
+  &__close {
+    min-height: auto;
+    transition: var(--b3-transition);
+  }
+
+  &__sliderDown {
+    height: 0;
+    overflow: hidden;
+    transition: var(--b3-transition);
+  }
+}
+
+.counter {
+  margin-left: 4px;
+  line-height: 22px;
+  padding: 0 8px;
+  color: var(--b3-theme-on-surface-light);
+  border-radius: var(--b3-border-radius);
+  font-size: 12px;
+  user-select: none;
+  height: 22px;
+
+  &--right {
+    width: 32px;
+    text-align: right;
+  }
+
+  &--bg {
+    background-color: var(--b3-theme-surface);
+  }
+}
+
+.reveal {
+  font-family: var(--b3-font-family);
+}
+
+.backlink--more {
+  .b3-list-item__text {
+    -webkit-line-clamp: initial;
+  }
+
+  .b3-list-item__graphic.popover__block {
+    align-self: flex-start;
+    margin-top: 7px;
+  }
+}
+
+.switch-doc {
+  max-height: 70vh;
+  max-width: 100%;
+  min-width: 426px;
+
+  .b3-list {
+    padding: 8px 0;
+  }
+
+  .b3-list:last-child {
+    border-left: 1px solid var(--b3-theme-surface-lighter);
+  }
+
+  &__path {
+    padding: 4px 8px;
+    border-top: 1px solid var(--b3-theme-surface-lighter);
+    color: var(--b3-theme-on-surface);
+    font-size: 12px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    line-height: 18px;
+    min-height: 18px;
+  }
+}
diff --git a/app/src/assets/scss/_mobile-styles.scss b/app/src/assets/scss/_mobile-styles.scss
new file mode 100644
index 000000000..41868eb7c
--- /dev/null
+++ b/app/src/assets/scss/_mobile-styles.scss
@@ -0,0 +1,509 @@
+@use "util/mixin";
+@use "util/function";
+
+.block__popover {
+  width: 80vw;
+}
+
+.fn__flex-column[data-type="sidebar-file"] {
+  .b3-list-item {
+    -webkit-user-select: none;
+  }
+}
+
+.b3-list--mobile {
+
+  & > .fn__flex-column {
+    height: 100%;
+  }
+
+  .b3-list-item {
+    font-size: 16px;
+    line-height: 40px;
+
+    &__icon {
+      font-size: 18px;
+      line-height: 32px;
+      height: auto;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &__graphic {
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+      font-size: 18px;
+    }
+
+    &__toggle {
+      height: 32px;
+      padding: 4px;
+    }
+
+    &__arrow {
+      height: 12px;
+      width: 12px;
+    }
+
+    &__action {
+      padding: 8px;
+      height: 16px;
+
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+}
+
+.file-tree__sliderDown {
+  height: 0;
+  overflow: hidden;
+  transition: var(--b3-transition);
+}
+
+.counter {
+  margin-left: 4px;
+  padding: 0 8px;
+  color: var(--b3-theme-on-surface-light);
+  border-radius: var(--b3-border-radius);
+  user-select: none;
+  background-color: var(--b3-theme-background-light);
+  line-height: 24px;
+  height: 24px;
+  font-size: 16px;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  max-width: 100vw;
+  background: var(--b3-theme-background);
+
+  &--border {
+    border-bottom: .5px solid var(--b3-theme-background-light);
+  }
+
+  &--dark {
+    background-color: var(--b3-theme-surface);
+  }
+
+  &__icon {
+    height: 16px;
+    width: 16px;
+    padding: 10px;
+    flex-shrink: 0;
+    margin: 6px 4px;
+    color: var(--b3-theme-on-surface);
+    border-radius: var(--b3-border-radius);
+
+    &[disabled] {
+      opacity: .38;
+    }
+
+    &--active,
+    &:not(.toolbar__icon-deactivate):focus,
+    &:not(.toolbar__icon-deactivate):hover {
+      background-color: var(--b3-list-hover);
+    }
+
+    &--history {
+      height: 36px;
+      width: 36px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 0;
+    }
+  }
+
+  &__title {
+    flex: 1;
+    box-shadow: none;
+    min-width: 1px;
+    line-height: 30px;
+    font-size: 17px;
+    padding: 0;
+    border: 0;
+    background-color: transparent;
+    color: var(--b3-theme-on-background);
+  }
+
+  &__text {
+    @include mixin.text-clamp(1);
+    flex: 1;
+    font-size: 17px;
+    min-height: 30px;
+    line-height: 30px;
+  }
+}
+
+.side-panel {
+  position: fixed;
+  background-color: var(--b3-theme-surface);
+  height: 100vh;
+  width: 100vw;
+  z-index: 7;
+  transform: translateX(-100vw);
+  transition: transform .15s cubic-bezier(0, 0, .2, 1) 0ms;
+
+  &--all {
+    transform: translateY(-200vh);
+  }
+}
+
+.side-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 6;
+  background-color: #000;
+  opacity: 0;
+  transition: opacity 150ms linear;
+}
+
+#model {
+  box-sizing: border-box;
+
+  .toolbar__text {
+    min-height: 48px;
+    line-height: 48px;
+  }
+
+  .config-about__logo {
+    display: flex;
+    align-items: center;
+
+    img {
+      width: 36px;
+    }
+  }
+
+  .config-account {
+    &__bg {
+      position: relative;
+      width: 100%;
+      flex: 1;
+    }
+
+    &__cover {
+      width: 100vw;
+      height: 50vh;
+      background-size: cover;
+      background-position: center center;
+    }
+
+    &__avatar {
+      position: absolute;
+      top: 50vh;
+      width: 128px;
+      height: 128px;
+      left: 50%;
+      margin: -160px 0 0 -64px;
+      background-repeat: no-repeat;
+      background-position: 50%;
+      background-size: cover;
+      border-radius: 90px;
+      background-color: rgba(255, 255, 255, .8);
+      box-shadow: var(--b3-point-shadow);
+      border: 1px solid var(--b3-theme-surface-lighter);
+    }
+
+    &__info {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 16px;
+    }
+
+    &__name {
+      width: 100%;
+      text-align: center;
+    }
+  }
+
+  .config-assets {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    box-sizing: border-box;
+    position: relative;
+
+    &__list {
+      overflow: auto;
+      flex: 1;
+    }
+
+    &__preview {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      overflow: auto;
+      flex: 1;
+      margin-top: 8px;
+      padding: 0 8px;
+    }
+  }
+}
+
+#menu {
+  z-index: 7;
+  transform: translateX(100vw);
+  top: 0;
+
+  // for plugin
+  .b3-menu__item > svg:not(.b3-menu__icon) {
+    height: 17px;
+    width: 17px;
+    margin: 0 16px 0 8px;
+    border-radius: var(--b3-border-radius);
+    align-self: center;
+    color: var(--b3-theme-on-surface);
+  }
+}
+
+.keyboard {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  box-sizing: border-box;
+  height: 42px;
+  background: var(--b3-theme-background);
+  display: flex;
+  border-top: 1px solid var(--b3-theme-surface-lighter);
+  overflow: hidden;
+  flex-direction: column;
+  z-index: 1;
+
+  &__dynamic {
+    overflow: auto;
+    display: flex;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__bar {
+    border-bottom: 1px solid var(--b3-theme-surface-lighter);
+  }
+
+  &__util {
+    flex: 1;
+    overflow: auto;
+    background-color: var(--b3-theme-surface);
+  }
+
+  &__split {
+    width: 1px;
+    height: 28px;
+    background-color: var(--b3-theme-surface-lighter);
+    align-self: center;
+    flex-shrink: 0;
+  }
+
+  &__action {
+    background: transparent;
+    padding: 0;
+    border: 0;
+    color: var(--b3-theme-on-surface);
+
+    span {
+      padding: 6px;
+      white-space: nowrap;
+    }
+
+    &[disabled] {
+      opacity: .38;
+    }
+
+    &.protyle-toolbar__item--current svg {
+      background-color: var(--b3-list-hover);
+    }
+
+    svg {
+      height: 16px;
+      width: 16px;
+      float: left;
+      padding: 6px;
+      margin: 6px;
+      border-radius: var(--b3-border-radius);
+
+      &.keyboard__svg--big {
+        width: 30px;
+        padding: 2px 6px;
+        height: 32px;
+        margin: 2px 6px;
+      }
+    }
+  }
+
+  &__slash {
+    &-title {
+      height: 24px;
+      padding: 0 8px;
+      line-height: 24px;
+      color: var(--b3-theme-on-surface);
+    }
+
+    &-block {
+      display: flex;
+      padding-left: 8px;
+      flex-wrap: wrap;
+    }
+
+    &-item {
+      background-color: var(--b3-theme-background);
+      border-radius: var(--b3-border-radius);
+      width: calc(50% - 8px);
+      display: flex;
+      align-items: center;
+      margin: 4px 8px 4px 0;
+      position: relative;
+      box-shadow: inset 0 0 0 .6px var(--b3-theme-on-surface);
+      border: 0;
+      color: var(--b3-theme-on-background);
+      min-height: 50px;
+      text-align: left;
+    }
+
+    &-icon {
+      height: 20px;
+      width: 20px;
+      margin: 6px;
+      flex-shrink: 0;
+      font-size: 20px;
+      text-align: center;
+      line-height: 20px;
+    }
+
+    &-text {
+      margin-left: 6px;
+    }
+  }
+}
+
+.svg {
+  fill: currentColor;
+  display: inline-block;
+  stroke-width: 0;
+  stroke: currentColor;
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+
+  &--mid {
+    width: 16px;
+    height: 16px;
+  }
+
+  &--small {
+    width: 12px;
+    height: 12px;
+  }
+
+  &--smaller {
+    width: 10px;
+    height: 10px;
+  }
+}
+
+#empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .b3-list-item {
+    width: 200px;
+  }
+}
+
+.b3-menu {
+  &__accelerator {
+    display: none;
+  }
+
+  &__item--warning {
+    color: var(--b3-theme-error);
+
+    & > .b3-menu__icon {
+      color: var(--b3-theme-error);
+    }
+  }
+}
+
+#historyContainer {
+  & > div {
+    flex-direction: column;
+
+    & > ul {
+      width: auto !important;
+      flex: 1;
+    }
+  }
+}
+
+.status {
+  position: fixed;
+  bottom: -30px;
+  transition: var(--b3-transition);
+  font-size: 12px;
+  color: var(--b3-theme-on-surface);
+  padding: 4px;
+  white-space: nowrap;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: var(--b3-theme-background);
+  @extend %fn__ellipsis;
+  z-index: 2;
+}
+
+.protyle {
+  &-font {
+    font-size: 14px;
+  }
+
+  // iPhone 右上角属性中对不齐
+  &-wysiwyg--attr .protyle-attr > div:not(.protyle-attr--memo):not(.protyle-attr--refcount) {
+    max-width: 26vw;
+    white-space: nowrap;
+    display: block;
+  }
+
+  // 移动端键盘弹起和点击加号需保持滚动高度一致
+  &-background__img img {
+    height: 200px;
+  }
+
+  &-scroll {
+    right: 0;
+  }
+
+  &-hint {
+    min-width: 100vw;
+    max-height: 70vh;
+  }
+}
+
+.b3-dialog__container {
+  max-width: 100vw;
+}
+
+@media (max-width: 620px) {
+  .protyle-wysiwyg [data-node-id].sb[data-sb-layout="col"] {
+    flex-direction: column;
+    flex-wrap: initial;
+
+    & > div {
+      margin-right: 0;
+    }
+  }
+}
diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss
index e85c292c7..f67edce3a 100644
--- a/app/src/assets/scss/base.scss
+++ b/app/src/assets/scss/base.scss
@@ -1,389 +1,38 @@
-@import "util/keyframes";
-@import "util/mixin";
-@import "util/function";
-@import "business/history";
-@import "component/chip";
-@import "component/slider";
-@import "component/switch";
-@import "util/scroll";
-@import "component/tooltips";
-@import "component/dialog";
-@import "component/button";
-@import "component/snackbar";
-@import "component/form";
-@import "component/text-field";
-@import "component/select";
-@import "component/list";
-@import "business/graph";
-@import "business/layout";
-@import "business/block";
-@import "util/reset";
-@import "component/card";
-@import "component/menu";
-@import "business/color";
-@import "protyle/protyle";
-@import "component/typography";
-@import "pdf/pdf";
-@import "business/config";
-@import "business/search";
-@import "pickr/pcr";
-@import "viewerjs/viewer";
-@import "business/export";
-@import "business/card";
-@import "business/custom";
-@import "business/resize";
-@import "business/av";
-@import "business/emojis";
-@import "component/svg";
-
-/*
-.status: 2
-
-.protyle-util: 4
-
-.protyle-hint: 5
-
-.side-mask: 6
-
-Mobile #menu & .side-panel: 7
-
-.fullscreen: 8
-
-#windowControls: 9
-
-window.siyuan.zIndex: 10
-
-.b3-tooltips: 1000000
-*/
-
-html {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-}
-
-.fullscreen {
-  position: fixed;
-  top: 0;
-  width: 100% !important;
-  left: 0;
-  height: 100vh !important;
-  z-index: 8;
-  border-radius: 0;
-
-  & > .protyle-breadcrumb,
-  & > .block__icons { // 关系图、card
-    padding-left: var(--b3-toolbar-left-mac);
-    height: 32px;
-    min-height: 32px;
-  }
-
-  .protyle-breadcrumb > .protyle-breadcrumb__space,
-  & > .block__icons > .fn__flex-1 {
-    -webkit-app-region: drag;
-    min-width: 32px;
-    height: 100%;
-    box-sizing: border-box;
-    border-radius: var(--b3-border-radius-b);
-
-    &:hover {
-      background-color: var(--b3-theme-surface-light);
-    }
-  }
-}
-
-
-.toolbar {
-  background-color: var(--b3-toolbar-background);
-  box-sizing: border-box;
-  height: 32px;
-  line-height: 32px;
-  padding: 0 5px 0 var(--b3-toolbar-left-mac);
-  overflow: hidden; // 最小化后右上角显示不全
-  border-bottom: .5px solid var(--b3-border-color);
-
-  &--browser {
-    padding-left: env(titlebar-area-x, 0);
-    padding-right: calc(100% - env(titlebar-area-width, 100%) - env(titlebar-area-x, 0));
-    height: calc(env(titlebar-area-height, 31px) + 1px);
-  }
-
-  #windowControls {
-    top: 0;
-    // https://github.com/siyuan-note/siyuan/issues/11275#issuecomment-2112416383
-    z-index: 9;
-    right: 0;
-    position: relative;
-    margin-left: 2px;
-  }
-
-  #drag {
-    -webkit-app-region: drag;
-    color: var(--b3-toolbar-color);
-    user-select: none;
-    text-align: center;
-    white-space: nowrap;
-    align-self: center;
-    font-size: 12px;
-    min-width: 148px;
-    box-sizing: border-box;
-  }
-
-  &__item {
-    flex-shrink: 0;
-    cursor: pointer;
-    color: var(--b3-toolbar-color);
-    padding: 5px;
-    margin: 2px;
-    border-radius: var(--b3-border-radius);
-    box-sizing: border-box;
-    transition: var(--b3-transition);
-    display: flex;
-    align-self: center;
-    background-color: transparent;
-    border: 0;
-    line-height: 13.5px;
-    height: 23.5px;
-
-    &:not(.toolbar__item--disabled):not(.toolbar__item--close):hover,
-    &--active {
-      background-color: var(--b3-toolbar-hover);
-      color: var(--b3-theme-on-background);
-    }
-
-    svg {
-      height: 13.5px;
-      width: 13.5px;
-    }
-
-    svg.toolbar__svg {
-      width: 8px;
-      height: 13.5px;
-      margin-left: 4px;
-      opacity: .54;
-    }
-
-    &--disabled {
-      opacity: .54;
-      cursor: not-allowed;
-    }
-
-    &--win {
-      padding: 9px;
-      margin: 0;
-      height: 31.5px;
-      border-radius: 0;
-    }
-
-    &--close {
-      padding: 9px 16px;
-      margin: 0;
-      height: 31.5px;
-      border-radius: 0;
-
-      svg {
-        width: 10px !important;
-      }
-
-      &:hover {
-        color: var(--b3-theme-on-error);
-        background-color: var(--b3-theme-error)
-      }
-    }
-  }
-
-  &__window {
-    position: fixed;
-    top: 0;
-    right: 0;
-    display: flex;
-    z-index: 502;
-
-    .toolbar__item {
-      padding: 14.25px;
-      height: auto;
-      margin: 0;
-      border-radius: 0;
-
-      &:not(.toolbar__item--disabled):not(.toolbar__item--close):hover,
-      &--active {
-        background-color: var(--b3-theme-background-light);
-      }
-    }
-  }
-
-  &__text {
-    font-size: 12px;
-    max-width: 96px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    user-select: none;
-  }
-}
-
-.status {
-  background-color: var(--b3-theme-surface);
-  box-sizing: border-box;
-  z-index: 2;
-  height: 32px;
-  line-height: 32px;
-  border-top: .5px solid var(--b3-border-color);
-  padding: 0 5px;
-
-  .toolbar__item {
-    color: var(--b3-theme-on-surface);
-
-    &:hover {
-      color: var(--b3-theme-on-background);
-      background-color: var(--b3-theme-background-light) !important;
-    }
-  }
-
-  &__msg {
-    color: var(--b3-theme-on-surface);
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    padding-left: 5px;
-    font-size: 12px;
-  }
-
-  &__counter {
-    display: flex;
-    flex-shrink: 0;
-    font-size: 12px;
-  }
-
-  &__backgroundtask {
-    display: flex;
-    color: var(--b3-theme-on-surface);
-    font-size: 12px;
-
-    & > div {
-      height: 4px;
-      border-radius: var(--b3-border-radius);
-      overflow: hidden;
-      background-color: #fff;
-      width: 64px;
-      align-self: center;
-      margin: 0 8px 0 4px;
-      cursor: pointer;
-      flex-shrink: 0;
-
-      & > div {
-        background-color: var(--b3-theme-primary-light);
-        height: 4px;
-        background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
-        animation: stripMove 450ms linear infinite;
-        background-size: 50px 50px;
-      }
-    }
-  }
-
-  .fn__space:last-child {
-    width: 5px;
-  }
-}
-
-.asset {
-  overflow: auto;
-  box-sizing: border-box;
-  margin: 16px;
-
-  &--pdf {
-    margin: 0;
-    height: 100%;
-  }
-
-  img, video, audio, canvas {
-    max-width: 100%;
-  }
-}
-
-.file-tree {
-  &:hover .block__icons .block__icon:not([disabled]),
-  &.fullscreen .block__icons .block__icon:not([disabled]) {
-    opacity: 1;
-  }
-
-  &:hover .block__icons .block__icon[disabled] {
-    opacity: .38;
-  }
-
-  &__close {
-    min-height: auto;
-    transition: var(--b3-transition);
-  }
-
-  &__sliderDown {
-    height: 0;
-    overflow: hidden;
-    transition: var(--b3-transition);
-  }
-}
-
-.counter {
-  margin-left: 4px;
-  line-height: 22px;
-  padding: 0 8px;
-  color: var(--b3-theme-on-surface-light);
-  border-radius: var(--b3-border-radius);
-  font-size: 12px;
-  user-select: none;
-  height: 22px;
-
-  &--right {
-    width: 32px;
-    text-align: right;
-  }
-
-  &--bg {
-    background-color: var(--b3-theme-surface);
-  }
-}
-
-.reveal {
-  font-family: var(--b3-font-family);
-}
-
-.backlink--more {
-  .b3-list-item__text {
-    -webkit-line-clamp: initial;
-  }
-
-  .b3-list-item__graphic.popover__block {
-    align-self: flex-start;
-    margin-top: 7px;
-  }
-}
-
-.switch-doc {
-  max-height: 70vh;
-  max-width: 100%;
-  min-width: 426px;
-
-  .b3-list {
-    padding: 8px 0;
-  }
-
-  .b3-list:last-child {
-    border-left: 1px solid var(--b3-theme-surface-lighter);
-  }
-
-  &__path {
-    padding: 4px 8px;
-    border-top: 1px solid var(--b3-theme-surface-lighter);
-    color: var(--b3-theme-on-surface);
-    font-size: 12px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    line-height: 18px;
-    min-height: 18px;
-  }
-}
-
-// 需放置最后，否则 https://github.com/siyuan-note/siyuan/issues/7056
-@import "util/responsive";
+@use "util/keyframes" as *;
+@use "util/function" as *;
+@use "business/history" as *;
+@use "component/chip" as *;
+@use "component/slider" as *;
+@use "component/switch" as *;
+@use "util/scroll" as *;
+@use "component/tooltips" as *;
+@use "component/dialog" as *;
+@use "component/button" as *;
+@use "component/snackbar" as *;
+@use "component/form" as *;
+@use "component/text-field" as *;
+@use "component/select" as *;
+@use "component/list" as *;
+@use "business/graph" as *;
+@use "business/layout" as *;
+@use "business/block" as *;
+@use "util/reset" as *;
+@use "component/card" as *;
+@use "component/menu" as *;
+@use "business/color" as *;
+@use "protyle/protyle" as *;
+@use "component/typography" as *;
+@use "pdf/pdf" as *;
+@use "business/config" as *;
+@use "business/search" as *;
+@use "pickr/pcr" as *;
+@use "viewerjs/viewer" as *;
+@use "business/export" as *;
+@use "business/card" as *;
+@use "business/custom" as *;
+@use "business/resize" as *;
+@use "business/av" as *;
+@use "business/emojis" as *;
+@use "component/svg" as *;
+@use "base-styles" as *;
+@use "util/responsive" as *; // 需放置最后，否则 https://github.com/siyuan-note/siyuan/issues/7056
diff --git a/app/src/assets/scss/business/_card.scss b/app/src/assets/scss/business/_card.scss
index b11435ff7..0e4b71826 100644
--- a/app/src/assets/scss/business/_card.scss
+++ b/app/src/assets/scss/business/_card.scss
@@ -1,6 +1,8 @@
+@use "../util/function";
+
 .card {
   &__main {
-    @extend .fn__flex-column;
+    @extend %fn__flex-column;
     box-sizing: border-box;
     max-height: 100%;
     background-color: var(--b3-theme-surface);
diff --git a/app/src/assets/scss/business/_graph.scss b/app/src/assets/scss/business/_graph.scss
index bd2724758..001cb86e3 100644
--- a/app/src/assets/scss/business/_graph.scss
+++ b/app/src/assets/scss/business/_graph.scss
@@ -1,3 +1,5 @@
+@use "../util/mixin";
+
 .graph {
   display: flex;
   flex-direction: column;
@@ -57,7 +59,7 @@
       color: var(--b3-theme-on-surface);
       max-width: 10vw;
       white-space: break-spaces;
-      @include text-clamp(3);
+      @include mixin.text-clamp(3);
     }
   }
 }
diff --git a/app/src/assets/scss/business/_search.scss b/app/src/assets/scss/business/_search.scss
index ff0b34b86..baffc3af5 100644
--- a/app/src/assets/scss/business/_search.scss
+++ b/app/src/assets/scss/business/_search.scss
@@ -1,3 +1,6 @@
+@use "../util/function";
+@use "../component/form";
+
 .search {
   &__layout {
     display: flex;
@@ -78,7 +81,7 @@
   }
 
   &__history-icon {
-    @extend .fn__a;
+    @extend %fn__a;
     height: 42px;
     width: 42px;
     display: block;
@@ -141,7 +144,7 @@
   }
 
   &__rmpath {
-    @extend .b3-form__icon-clear;
+    @extend %b3-form__icon-clear;
   }
 
   &__tip {
diff --git a/app/src/assets/scss/component/_card.scss b/app/src/assets/scss/component/_card.scss
index b4482ebaf..8a2644fb8 100644
--- a/app/src/assets/scss/component/_card.scss
+++ b/app/src/assets/scss/component/_card.scss
@@ -1,3 +1,5 @@
+@use "../util/mixin";
+
 .b3-card {
   box-shadow: var(--b3-point-shadow);
   background-color: var(--b3-theme-surface);
@@ -60,7 +62,7 @@
     font-size: 12px;
     margin-top: 4px;
     max-height: 54px;
-    @include text-clamp(3);
+    @include mixin.text-clamp(3);
   }
 
   &__actions {
diff --git a/app/src/assets/scss/component/_form.scss b/app/src/assets/scss/component/_form.scss
index a3e86adc3..be901af82 100644
--- a/app/src/assets/scss/component/_form.scss
+++ b/app/src/assets/scss/component/_form.scss
@@ -1,3 +1,17 @@
+%b3-form__icon-clear {
+  position: absolute;
+  height: 18px;
+  width: 16px;
+  opacity: .68;
+  transition: var(--b3-transition);
+  right: 0;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
 .b3-form {
   &__space {
     margin: 16px 24px;
@@ -47,17 +61,7 @@
   }
 
   &__icon-clear {
-    position: absolute;
-    height: 18px;
-    width: 16px;
-    opacity: .68;
-    transition: var(--b3-transition);
-    right: 0;
-    cursor: pointer;
-
-    &:hover {
-      opacity: 1;
-    }
+    @extend %b3-form__icon-clear;
   }
 
   // repo password & av description
diff --git a/app/src/assets/scss/component/_list.scss b/app/src/assets/scss/component/_list.scss
index 1735bbb4a..c9450656f 100644
--- a/app/src/assets/scss/component/_list.scss
+++ b/app/src/assets/scss/component/_list.scss
@@ -1,3 +1,32 @@
+@use "../util/mixin";
+
+%b3-list-item__icon {
+  svg, img {
+    height: 16px;
+    width: 16px;
+    color: var(--b3-theme-on-surface);
+  }
+
+  text-align: center;
+  font-size: 14px;
+  font-family: var(--b3-font-family-emoji);
+  margin-right: 4px;
+  line-height: 22px;
+  transition: var(--b3-transition);
+  height: 22px;
+  padding: 0 4px;
+  flex-shrink: 0;
+  border-radius: var(--b3-border-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    color: var(--b3-theme-on-background);
+    background-color: var(--b3-list-icon-hover);
+  }
+}
+
 .b3-list {
   mark {
     background-color: var(--b3-protyle-inline-mark-background);
@@ -156,30 +185,7 @@
     }
 
     &__icon {
-      svg, img {
-        height: 16px;
-        width: 16px;
-        color: var(--b3-theme-on-surface);
-      }
-
-      text-align: center;
-      font-size: 14px;
-      font-family: var(--b3-font-family-emoji);
-      margin-right: 4px;
-      line-height: 22px;
-      transition: var(--b3-transition);
-      height: 22px;
-      padding: 0 4px;
-      flex-shrink: 0;
-      border-radius: var(--b3-border-radius);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &:hover {
-        color: var(--b3-theme-on-background);
-        background-color: var(--b3-list-icon-hover);
-      }
+      @extend %b3-list-item__icon;
     }
 
     &__hinttext {
@@ -233,7 +239,7 @@
       border: 0;
       padding: 0;
       color: var(--b3-theme-on-background);
-      @include text-clamp(1);
+      @include mixin.text-clamp(1);
 
       // 搜索列表中自定义图标
       & > img:not(.emoji),
diff --git a/app/src/assets/scss/component/_menu.scss b/app/src/assets/scss/component/_menu.scss
index fe7e18837..afa87216d 100644
--- a/app/src/assets/scss/component/_menu.scss
+++ b/app/src/assets/scss/component/_menu.scss
@@ -1,3 +1,6 @@
+@use "../util/mixin";
+@use "../component/list";
+
 .b3-menu {
   position: fixed;
   border-radius: var(--b3-border-radius-b);
@@ -157,7 +160,7 @@
     }
 
     .b3-menu__label {
-      @include text-clamp(1);
+      @include mixin.text-clamp(1);
       max-width: 30vw;
       white-space: nowrap;
       overflow: hidden;
@@ -309,7 +312,7 @@
   }
 
   &__avemoji {
-    @extend .b3-list-item__icon;
+    @extend %b3-list-item__icon;
     align-self: center;
     margin-left: -4px;
     font-size: 14px;
diff --git a/app/src/assets/scss/component/_text-field.scss b/app/src/assets/scss/component/_text-field.scss
index 938ea0698..93bc86436 100644
--- a/app/src/assets/scss/component/_text-field.scss
+++ b/app/src/assets/scss/component/_text-field.scss
@@ -1,4 +1,4 @@
-.b3-text-field {
+%b3-text-field {
   border: 0;
   border-radius: var(--b3-border-radius);
   box-shadow: inset 0 0 0 .6px var(--b3-theme-on-surface);
@@ -33,3 +33,7 @@
     box-shadow: 0 0 0;
   }
 }
+
+.b3-text-field {
+  @extend %b3-text-field;
+}
diff --git a/app/src/assets/scss/component/_typography.scss b/app/src/assets/scss/component/_typography.scss
index 943d3262b..326f11676 100644
--- a/app/src/assets/scss/component/_typography.scss
+++ b/app/src/assets/scss/component/_typography.scss
@@ -1,3 +1,5 @@
+@use "../util/function";
+
 @font-face {
   font-family: 'JetBrainsMono-Regular';
   /*! /* webpackIgnore: true */
@@ -261,7 +263,7 @@
 
   code:not(.hljs),
   span[data-type~="code"] {
-    @extend .fn__code;
+    @extend %fn__code;
     tab-size: 4;
   }
 
diff --git a/app/src/assets/scss/export.scss b/app/src/assets/scss/export.scss
index 77b469a2a..2528300cc 100644
--- a/app/src/assets/scss/export.scss
+++ b/app/src/assets/scss/export.scss
@@ -1,15 +1,15 @@
-@import "util/mixin";
-@import "component/tooltips";
-@import "protyle/wysiwyg";
-@import "component/typography";
-@import "protyle/attr";
-@import "util/function";
-@import "business/history";
-@import "component/button";
-@import "component/select";
-@import "component/switch";
-@import "component/slider";
-@import "component/text-field";
+@use "util/mixin" as *;
+@use "component/tooltips" as *;
+@use "protyle/wysiwyg" as *;
+@use "component/typography" as *;
+@use "protyle/attr" as *;
+@use "util/function" as *;
+@use "business/history" as *;
+@use "component/button" as *;
+@use "component/select" as *;
+@use "component/switch" as *;
+@use "component/slider" as *;
+@use "component/text-field" as *;
 
 .protyle-wysiwyg a,
 .b3-typography a {
diff --git a/app/src/assets/scss/mobile.scss b/app/src/assets/scss/mobile.scss
index 9a774e3f3..9da8d54c9 100644
--- a/app/src/assets/scss/mobile.scss
+++ b/app/src/assets/scss/mobile.scss
@@ -1,539 +1,32 @@
-@import "util/keyframes";
-@import "util/mixin";
-@import "component/chip";
-@import "component/slider";
-@import "component/switch";
-@import "component/dialog";
-@import "component/button";
-@import "component/menu";
-@import "component/snackbar";
-@import "component/form";
-@import "component/text-field";
-@import "component/select";
-@import "component/list";
-@import "business/graph";
-@import "business/layout";
-@import "business/block";
-@import "util/reset";
-@import "util/function";
-@import "business/history";
-@import "business/color";
-@import "protyle/protyle";
-@import "component/typography";
-@import "viewerjs/viewer";
-@import "business/export";
-@import "business/card";
-@import "business/custom";
-@import "business/av";
-@import "business/search";
-@import "business/emojis";
-@import "component/svg";
-
-.block__popover {
-  width: 80vw;
-}
-
-.fn__flex-column[data-type="sidebar-file"] {
-  .b3-list-item {
-    -webkit-user-select: none;
-  }
-}
-
-.b3-list--mobile {
-
-  & > .fn__flex-column {
-    height: 100%;
-  }
-
-  .b3-list-item {
-    font-size: 16px;
-    line-height: 40px;
-
-    &__icon {
-      font-size: 18px;
-      line-height: 32px;
-      height: auto;
-
-      &:hover {
-        background-color: transparent;
-      }
-    }
-
-    &__graphic {
-      width: 18px;
-      height: 18px;
-      line-height: 18px;
-      font-size: 18px;
-    }
-
-    &__toggle {
-      height: 32px;
-      padding: 4px;
-    }
-
-    &__arrow {
-      height: 12px;
-      width: 12px;
-    }
-
-    &__action {
-      padding: 8px;
-      height: 16px;
-
-      svg {
-        width: 16px;
-        height: 16px;
-      }
-    }
-  }
-}
-
-.file-tree__sliderDown {
-  height: 0;
-  overflow: hidden;
-  transition: var(--b3-transition);
-}
-
-.counter {
-  margin-left: 4px;
-  padding: 0 8px;
-  color: var(--b3-theme-on-surface-light);
-  border-radius: var(--b3-border-radius);
-  user-select: none;
-  background-color: var(--b3-theme-background-light);
-  line-height: 24px;
-  height: 24px;
-  font-size: 16px;
-}
-
-.toolbar {
-  display: flex;
-  align-items: center;
-  max-width: 100vw;
-  background: var(--b3-theme-background);
-
-  &--border {
-    border-bottom: .5px solid var(--b3-theme-background-light);
-  }
-
-  &--dark {
-    background-color: var(--b3-theme-surface);
-  }
-
-  &__icon {
-    height: 16px;
-    width: 16px;
-    padding: 10px;
-    flex-shrink: 0;
-    margin: 6px 4px;
-    color: var(--b3-theme-on-surface);
-    border-radius: var(--b3-border-radius);
-
-    &[disabled] {
-      opacity: .38;
-    }
-
-    &--active,
-    &:not(.toolbar__icon-deactivate):focus,
-    &:not(.toolbar__icon-deactivate):hover {
-      background-color: var(--b3-list-hover);
-    }
-
-    &--history {
-      height: 36px;
-      width: 36px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 0;
-    }
-  }
-
-  &__title {
-    flex: 1;
-    box-shadow: none;
-    min-width: 1px;
-    line-height: 30px;
-    font-size: 17px;
-    padding: 0;
-    border: 0;
-    background-color: transparent;
-    color: var(--b3-theme-on-background);
-  }
-
-  &__text {
-    @include text-clamp(1);
-    flex: 1;
-    font-size: 17px;
-    min-height: 30px;
-    line-height: 30px;
-  }
-}
-
-.side-panel {
-  position: fixed;
-  background-color: var(--b3-theme-surface);
-  height: 100vh;
-  width: 100vw;
-  z-index: 7;
-  transform: translateX(-100vw);
-  transition: transform .15s cubic-bezier(0, 0, .2, 1) 0ms;
-
-  &--all {
-    transform: translateY(-200vh);
-  }
-}
-
-.side-mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 6;
-  background-color: #000;
-  opacity: 0;
-  transition: opacity 150ms linear;
-}
-
-#model {
-  box-sizing: border-box;
-
-  .toolbar__text {
-    min-height: 48px;
-    line-height: 48px;
-  }
-
-  .config-about__logo {
-    display: flex;
-    align-items: center;
-
-    img {
-      width: 36px;
-    }
-  }
-
-  .config-account {
-    &__bg {
-      position: relative;
-      width: 100%;
-      flex: 1;
-    }
-
-    &__cover {
-      width: 100vw;
-      height: 50vh;
-      background-size: cover;
-      background-position: center center;
-    }
-
-    &__avatar {
-      position: absolute;
-      top: 50vh;
-      width: 128px;
-      height: 128px;
-      left: 50%;
-      margin: -160px 0 0 -64px;
-      background-repeat: no-repeat;
-      background-position: 50%;
-      background-size: cover;
-      border-radius: 90px;
-      background-color: rgba(255, 255, 255, .8);
-      box-shadow: var(--b3-point-shadow);
-      border: 1px solid var(--b3-theme-surface-lighter);
-    }
-
-    &__info {
-      width: 100%;
-      box-sizing: border-box;
-      padding: 16px;
-    }
-
-    &__name {
-      width: 100%;
-      text-align: center;
-    }
-  }
-
-  .config-assets {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    box-sizing: border-box;
-    position: relative;
-
-    &__list {
-      overflow: auto;
-      flex: 1;
-    }
-
-    &__preview {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      overflow: auto;
-      flex: 1;
-      margin-top: 8px;
-      padding: 0 8px;
-    }
-  }
-}
-
-#menu {
-  z-index: 7;
-  transform: translateX(100vw);
-  top: 0;
-
-  // for plugin
-  .b3-menu__item > svg:not(.b3-menu__icon) {
-    height: 17px;
-    width: 17px;
-    margin: 0 16px 0 8px;
-    border-radius: var(--b3-border-radius);
-    align-self: center;
-    color: var(--b3-theme-on-surface);
-  }
-}
-
-.keyboard {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  box-sizing: border-box;
-  height: 42px;
-  background: var(--b3-theme-background);
-  display: flex;
-  border-top: 1px solid var(--b3-theme-surface-lighter);
-  overflow: hidden;
-  flex-direction: column;
-  z-index: 1;
-
-  &__dynamic {
-    overflow: auto;
-    display: flex;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  &__bar {
-    border-bottom: 1px solid var(--b3-theme-surface-lighter);
-  }
-
-  &__util {
-    flex: 1;
-    overflow: auto;
-    background-color: var(--b3-theme-surface);
-  }
-
-  &__split {
-    width: 1px;
-    height: 28px;
-    background-color: var(--b3-theme-surface-lighter);
-    align-self: center;
-    flex-shrink: 0;
-  }
-
-  &__action {
-    background: transparent;
-    padding: 0;
-    border: 0;
-    color: var(--b3-theme-on-surface);
-
-    span {
-      padding: 6px;
-      white-space: nowrap;
-    }
-
-    &[disabled] {
-      opacity: .38;
-    }
-
-    &.protyle-toolbar__item--current svg {
-      background-color: var(--b3-list-hover);
-    }
-
-    svg {
-      height: 16px;
-      width: 16px;
-      float: left;
-      padding: 6px;
-      margin: 6px;
-      border-radius: var(--b3-border-radius);
-
-      &.keyboard__svg--big {
-        width: 30px;
-        padding: 2px 6px;
-        height: 32px;
-        margin: 2px 6px;
-      }
-    }
-  }
-
-  &__slash {
-    &-title {
-      height: 24px;
-      padding: 0 8px;
-      line-height: 24px;
-      color: var(--b3-theme-on-surface);
-    }
-
-    &-block {
-      display: flex;
-      padding-left: 8px;
-      flex-wrap: wrap;
-    }
-
-    &-item {
-      background-color: var(--b3-theme-background);
-      border-radius: var(--b3-border-radius);
-      width: calc(50% - 8px);
-      display: flex;
-      align-items: center;
-      margin: 4px 8px 4px 0;
-      position: relative;
-      box-shadow: inset 0 0 0 .6px var(--b3-theme-on-surface);
-      border: 0;
-      color: var(--b3-theme-on-background);
-      min-height: 50px;
-      text-align: left;
-    }
-
-    &-icon {
-      height: 20px;
-      width: 20px;
-      margin: 6px;
-      flex-shrink: 0;
-      font-size: 20px;
-      text-align: center;
-      line-height: 20px;
-    }
-
-    &-text {
-      margin-left: 6px;
-    }
-  }
-}
-
-.svg {
-  fill: currentColor;
-  display: inline-block;
-  stroke-width: 0;
-  stroke: currentColor;
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-
-  &--mid {
-    width: 16px;
-    height: 16px;
-  }
-
-  &--small {
-    width: 12px;
-    height: 12px;
-  }
-
-  &--smaller {
-    width: 10px;
-    height: 10px;
-  }
-}
-
-#empty {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  .b3-list-item {
-    width: 200px;
-  }
-}
-
-.b3-menu {
-  &__accelerator {
-    display: none;
-  }
-
-  &__item--warning {
-    color: var(--b3-theme-error);
-
-    & > .b3-menu__icon {
-      color: var(--b3-theme-error);
-    }
-  }
-}
-
-#historyContainer {
-  & > div {
-    flex-direction: column;
-
-    & > ul {
-      width: auto !important;
-      flex: 1;
-    }
-  }
-}
-
-.status {
-  position: fixed;
-  bottom: -30px;
-  transition: var(--b3-transition);
-  font-size: 12px;
-  color: var(--b3-theme-on-surface);
-  padding: 4px;
-  white-space: nowrap;
-  width: 100%;
-  box-sizing: border-box;
-  background-color: var(--b3-theme-background);
-  @extend .fn__ellipsis;
-  z-index: 2;
-}
-
-.protyle {
-  &-font {
-    font-size: 14px;
-  }
-
-  // iPhone 右上角属性中对不齐
-  &-wysiwyg--attr .protyle-attr > div:not(.protyle-attr--memo):not(.protyle-attr--refcount) {
-    max-width: 26vw;
-    white-space: nowrap;
-    display: block;
-  }
-
-  // 移动端键盘弹起和点击加号需保持滚动高度一致
-  &-background__img img {
-    height: 200px;
-  }
-
-  &-scroll {
-    right: 0;
-  }
-
-  &-hint {
-    min-width: 100vw;
-    max-height: 70vh;
-  }
-}
-
-.b3-dialog__container {
-  max-width: 100vw;
-}
-
-@media (max-width: 620px) {
-  .protyle-wysiwyg [data-node-id].sb[data-sb-layout="col"] {
-    flex-direction: column;
-    flex-wrap: initial;
-
-    & > div {
-      margin-right: 0;
-    }
-  }
-}
-
-@import "util/responsive";
+@use "util/keyframes" as *;
+@use "util/function" as *;
+@use "component/chip" as *;
+@use "component/slider" as *;
+@use "component/switch" as *;
+@use "component/dialog" as *;
+@use "component/button" as *;
+@use "component/menu" as *;
+@use "component/snackbar" as *;
+@use "component/form" as *;
+@use "component/text-field" as *;
+@use "component/select" as *;
+@use "component/list" as *;
+@use "business/graph" as *;
+@use "business/layout" as *;
+@use "business/block" as *;
+@use "util/reset" as *;
+@use "util/function" as *;
+@use "business/history" as *;
+@use "business/color" as *;
+@use "protyle/protyle" as *;
+@use "component/typography" as *;
+@use "viewerjs/viewer" as *;
+@use "business/export" as *;
+@use "business/card" as *;
+@use "business/custom" as *;
+@use "business/av" as *;
+@use "business/search" as *;
+@use "business/emojis" as *;
+@use "component/svg" as *;
+@use "mobile-styles" as *;
+@use "util/responsive" as *;
diff --git a/app/src/assets/scss/pdf/_pdf.scss b/app/src/assets/scss/pdf/_pdf.scss
index e29c7b393..310e46e6b 100644
--- a/app/src/assets/scss/pdf/_pdf.scss
+++ b/app/src/assets/scss/pdf/_pdf.scss
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-@import "pdf_viewer";
+@use "pdf_viewer" as *;
 
 .pdf {
   &__toolbar {
diff --git a/app/src/assets/scss/pdf/annotation_layer_builder.scss b/app/src/assets/scss/pdf/annotation_layer_builder.scss
index e6a8697a5..3f46604be 100644
--- a/app/src/assets/scss/pdf/annotation_layer_builder.scss
+++ b/app/src/assets/scss/pdf/annotation_layer_builder.scss
@@ -22,6 +22,12 @@
   --input-hover-border-color: black;
   --link-outline: none;
 
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  transform-origin: 0 0;
+
   @media screen and (forced-colors: active) {
     --input-focus-border-color: CanvasText;
     --input-unfocused-border-color: ActiveText;
@@ -71,12 +77,6 @@
     }
   }
 
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  transform-origin: 0 0;
-
   &[data-main-rotation="90"] .norotate {
     transform: rotate(270deg) translateX(-100%);
   }
diff --git a/app/src/assets/scss/pdf/pdf_viewer.scss b/app/src/assets/scss/pdf/pdf_viewer.scss
index 6c542efa6..06e910110 100644
--- a/app/src/assets/scss/pdf/pdf_viewer.scss
+++ b/app/src/assets/scss/pdf/pdf_viewer.scss
@@ -12,9 +12,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import "annotation_layer_builder";
-@import "text_layer_builder";
-@import "xfa_layer_builder";
+@use "annotation_layer_builder" as *;
+@use "text_layer_builder" as *;
+@use "xfa_layer_builder" as *;
 
 :root {
   --viewer-container-height: 0;
diff --git a/app/src/assets/scss/pdf/text_layer_builder.scss b/app/src/assets/scss/pdf/text_layer_builder.scss
index c2954ec39..e763c4d49 100644
--- a/app/src/assets/scss/pdf/text_layer_builder.scss
+++ b/app/src/assets/scss/pdf/text_layer_builder.scss
@@ -63,6 +63,12 @@
     --highlight-backdrop-filter: none;
     --highlight-selected-backdrop-filter: none;
 
+    margin: -1px;
+    padding: 1px;
+    background-color: var(--highlight-bg-color);
+    backdrop-filter: var(--highlight-backdrop-filter);
+    border-radius: 4px;
+
     @media screen and (forced-colors: active) {
       --highlight-bg-color: transparent;
       --highlight-selected-bg-color: transparent;
@@ -72,12 +78,6 @@
       );
     }
 
-    margin: -1px;
-    padding: 1px;
-    background-color: var(--highlight-bg-color);
-    backdrop-filter: var(--highlight-backdrop-filter);
-    border-radius: 4px;
-
     &.appended {
       position: initial;
     }
diff --git a/app/src/assets/scss/pickr/pcr.scss b/app/src/assets/scss/pickr/pcr.scss
index 8e2b47150..c3d0687cb 100644
--- a/app/src/assets/scss/pickr/pcr.scss
+++ b/app/src/assets/scss/pickr/pcr.scss
@@ -1,10 +1,12 @@
+@use "../component/text-field";
+
 .pcr-app {
   box-shadow: var(--b3-dialog-shadow);
   border: 1px solid var(--b3-theme-surface-lighter);
   border-radius: var(--b3-border-radius);
 
   .pcr-interaction .pcr-result {
-    @extend .b3-text-field;
+    @extend %b3-text-field;
     background: transparent;
     font-size: 12px;
   }
diff --git a/app/src/assets/scss/protyle/_protyle.scss b/app/src/assets/scss/protyle/_protyle.scss
index 3f8681dda..df9ecae77 100644
--- a/app/src/assets/scss/protyle/_protyle.scss
+++ b/app/src/assets/scss/protyle/_protyle.scss
@@ -1,7 +1,7 @@
-@import "content";
-@import "toolbar";
-@import "wysiwyg";
-@import "attr";
+@use "content" as *;
+@use "toolbar" as *;
+@use "wysiwyg" as *;
+@use "attr" as *;
 
 .protyle-scroll {
   --b3-dynamicscroll-width: 200px;
diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss
index 6a58d2377..525538200 100644
--- a/app/src/assets/scss/protyle/_wysiwyg.scss
+++ b/app/src/assets/scss/protyle/_wysiwyg.scss
@@ -1,3 +1,5 @@
+@use "../util/mixin";
+
 .protyle-wysiwyg {
   padding: 16px 16px 16px 24px;
   cursor: text;
@@ -582,7 +584,7 @@
 
     & > div:not(.protyle-attr--memo):not(.protyle-attr--refcount) {
       cursor: pointer;
-      @include text-clamp(1);
+      @include mixin.text-clamp(1);
       max-width: 25vw;
     }
   }
@@ -614,7 +616,7 @@
   }
 
   [data-node-id][fold="1"]:not(.li):not([data-type="NodeHeading"]) {
-    @include text-clamp(1);
+    @include mixin.text-clamp(1);
     opacity: .38;
     font-size: 16px;
     height: 26px;
diff --git a/app/src/assets/scss/util/_function.scss b/app/src/assets/scss/util/_function.scss
index 0d0264f32..dce130b76 100644
--- a/app/src/assets/scss/util/_function.scss
+++ b/app/src/assets/scss/util/_function.scss
@@ -1,11 +1,46 @@
+@use "mixin";
+
+%fn {
+  &__ellipsis {
+    @include mixin.text-clamp(1);
+    display: block; // 集市挂件名称过长遮挡星标 https://github.com/siyuan-note/siyuan/issues/4782
+  }
+
+  &__flex-column {
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__a {
+    color: var(--b3-theme-on-surface);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--b3-theme-on-background);
+    }
+  }
+
+  &__code {
+    padding: .2em .4em;
+    margin: 0;
+    font-size: 85%;
+    border-radius: var(--b3-border-radius);
+    font-family: var(--b3-font-family-code);
+    word-break: break-word;
+    background-size: 20px 20px;
+    white-space: pre-wrap;
+    background-color: var(--b3-protyle-code-background);
+  }
+}
+
 .fn {
   &__hidescrollbar::-webkit-scrollbar {
     display: none;
   }
 
   &__ellipsis {
-    @include text-clamp(1);
-    display: block; // 集市挂件名称过长遮挡星标 https://github.com/siyuan-note/siyuan/issues/4782
+    @extend %fn__ellipsis;
   }
 
   &__space {
@@ -52,9 +87,7 @@
     }
 
     &-column {
-      min-height: 100%;
-      display: flex;
-      flex-direction: column;
+      @extend %fn__flex-column;
     }
 
     &-shrink {
@@ -83,12 +116,7 @@
   }
 
   &__a {
-    color: var(--b3-theme-on-surface);
-    cursor: pointer;
-
-    &:hover {
-      color: var(--b3-theme-on-background);
-    }
+    @extend %fn__a;
   }
 
   &__block {
@@ -125,15 +153,7 @@
   }
 
   &__code {
-    padding: .2em .4em;
-    margin: 0;
-    font-size: 85%;
-    border-radius: var(--b3-border-radius);
-    font-family: var(--b3-font-family-code);
-    word-break: break-word;
-    background-size: 20px 20px;
-    white-space: pre-wrap;
-    background-color: var(--b3-protyle-code-background);
+    @extend %fn__code;
   }
 
   &__kbd {