sass编译本身不导致暗黑模式切换卡顿，卡顿源于css加载替换重排重绘、变量过渡未作用于真实属性、第三方样式竞争等运行时问题。
为什么Sass编译的暗黑模式切换会卡顿
Sass本身不参与运行时切换，所谓“卡顿”其实是CSS加载或应用阶段的问题：两套样式（light.css 和 dark.css）被先后加载、替换时，浏览器要重排重绘整页；或者你误用 @if $mode == 'dark' 在单个文件里条件编译，导致规则冗余、层叠冲突，浏览器解析耗时上升。
避免切换导致的白屏与延迟
直接用 JS 切换 <link rel="stylesheet"> 的 href，必然触发新 CSS 下载 + 解析 + 替换，期间页面可能闪白或冻结。这不是 Sass 的错，而是加载策略问题。
- 改用单 CSS 文件：所有主题变量统一定义在
:root，用[data-theme="dark"]选择器覆盖，JS 只切换data-theme属性 - 禁用
<link>动态切换逻辑，把light.css和dark.css合并为一份带条件类的 CSS（Sass 编译时用@each或map生成） - 确保关键样式（如
body背景、文字色）在首屏 HTML 的<style></style>标签内联，避免 FOUC
transition 写在哪儿才真正生效
很多人在 :root 里写 transition: --bg-color 0.3s，但 CSS 变量本身不可动画——浏览器根本不会响应。过渡必须作用于实际渲染属性上。
- 对每个使用变量的元素，显式声明
transition: background-color 0.35s, color 0.35s，不能只靠继承 - 若用
background: var(--bg-color)，且--bg-color在[data-theme="dark"]下变值，那background-color才是真正被过渡的属性 - 避免给
html或body加will-change: transform—— 它会强制图层提升，反而干扰颜色过渡的合成路径
第三方组件颜色错乱的根源
Ant Design、MUI 这类库默认监听 prefers-color-scheme 或自己注入 .dark 类，和你的 [data-theme="dark"] 规则形成竞争。浏览器按层叠顺序选中，常导致部分颜色没更新。
- 统一接管：用高优先级选择器，比如
[data-theme="dark"] .ant-btn显式重写关键属性 - 禁用库的自动检测（如 MUI 的
useColorScheme），改由你控制data-theme状态 - 不要在 Sass 中为第三方组件写
@media (prefers-color-scheme: dark)—— 它和你的 JS 切换逻辑完全脱节，极易冲突
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
