SCSS代码解读：全局样式、过渡动画和自定义滚动条样式

SCSS代码包含了全局样式、过渡动画和自定义滚动条样式。以下是解读：

全局样式

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

• 将 html 和 body 元素的宽度和高度设置为视口的 100%，使其占满整个屏幕。

• 使用 overflow: hidden 禁用默认的滚动条。

html {
  font-size: 4px; /* 1rem = 4px。这通常用作 rem 单位计算的基础字体大小 */
}

• 将根元素的字体大小设置为 4px。这为整个应用中的 rem 单位计算提供了基础。

body {
  font-size: 16px;
}

• 将 body 的默认字体大小设置为 16px。

#app {
  width: 100%;
  height: 100%;
}

• 确保 #app 元素（通常是 Vue 应用的根组件）占据其容器的全部宽度和高度。

过渡动画

.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.3s;
}

• 定义一个过渡动画，适用于 fade-slide 动画的进入和离开过程。所有属性的过渡时间为 0.3 秒。

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

• 元素进入时的初始状态：完全透明且向左偏移 30px。

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

• 元素离开时的最终状态：完全透明且向右偏移 30px。

自定义滚动条样式

.cus-scroll {
  overflow: auto;
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
}

• 为带有 cus-scroll 类的元素添加自定义滚动条。滚动条的宽度和高度设置为 8px。

.cus-scroll-x {
  overflow-x: auto;
  &::-webkit-scrollbar {
    width: 0;
    height: 8px;
  }
}

• 自定义水平滚动条的样式。隐藏水平滚动条的轨道，但保留滑块可见。

.cus-scroll-y {
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 8px;
    height: 0;
  }
}

• 自定义垂直滚动条的样式。隐藏垂直滚动条的轨道，但保留滑块可见。

.cus-scroll,
.cus-scroll-x,
.cus-scroll-y {
  &::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 4px;
  }
  &:hover {
    &::-webkit-scrollbar-thumb {
      background: #bfbfbf;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: var(--primary-color);
    }
  }
}

• 定义滚动条滑块的外观。滑块初始时是透明的。

• 当用户将鼠标悬停在滚动条上时，滑块变为浅灰色（#bfbfbf）。

• 当鼠标悬停在滑块上时，滑块变为 CSS 变量中定义的主颜色（var(--primary-color)）。

这些样式通过自定义滚动条和过渡动画，可以显著提升网页的视觉效果和用户体验。