直接编译light.css和dark.css最稳定，因sass仅构建时执行，@media(prefers-color-scheme:dark)在sass中会无条件编译进css，导致冗余与冲突；主题应通过$themes map统一管理，入口文件分离并用!global绑定，构建命令分别输出两套css，html中用切换。
直接编译两套独立 CSS 文件（light.css 和 dark.css）是最稳定、最可控的方案，Sass 本身不支持运行时主题切换，所有“动态”逻辑都是假象。
为什么不能在 Sass 里用 @media (prefers-color-scheme: dark)
这个媒体查询是浏览器运行时判断的，而 Sass 只在构建阶段执行。你在 Sass 里写：@media (prefers-color-scheme: dark) { color: map-get($theme-dark, "text") }，结果是：无论当前系统设为亮色还是暗色，这条规则都会被编译进最终 CSS —— 它不会“条件生效”，只会造成样式冗余和层叠冲突。
更糟的是，如果 light.css 和 dark.css 混编进同一个文件，亮色规则可能因 CSS 顺序靠后而覆盖暗色规则，导致切换失效。
- 真正起作用的是 HTML 中的
<link rel="stylesheet" href="dark.css">或 class 切换 -
@media (prefers-color-scheme)适合纯 CSS 变量方案，不适合 Sass 主题编译流程 - 想兼容系统偏好？得靠 JS 读取
window.matchMedia("(prefers-color-scheme: dark)").matches，再加载对应 CSS
主题变量必须用 map 而不是独立变量
写一堆 $primary-light、$primary-dark、$primary-high-contrast 是自找麻烦。新增一个主题时，你得手动改遍所有组件文件里的引用，漏一处就错色。
正确结构是统一用 $themes map：
$themes: (
light: (
bg: #ffffff,
text: #1e293b,
border: #e2e8f0
),
dark: (
bg: #0f172a,
text: #f1f5f9,
border: #334155
)
);
- 所有主题的 key（
bg、text、border）必须严格一致，否则map-get($theme-map, "text")会返回null - 组件样式文件（如
_button.scss）只认map-get($theme-map, "text")，完全不关心当前是哪个主题 - 别在变量定义里用
!default覆盖，容易导致构建结果不可预测
入口文件要分离，且只控制 $theme-map 绑定
不能只写一个 main.scss，然后在里面用 @if $mode == "dark" 分支——这会让两套规则挤进同一份 CSS，class 切换时无法隔离作用域。
你需要两个最小入口：
// light.scss $theme-map: map-get($themes, light) !global; @import "base"; @import "components/button";
// dark.scss $theme-map: map-get($themes, dark) !global; @import "base"; @import "components/button";
-
!global确保$theme-map在所有被导入文件中可访问 - 构建命令也得分开：
sass light.scss:light.css和sass dark.scss:dark.css - HTML 中通过
<link>切换，而不是靠 JS 改document.body.className = "dark"去触发 CSS-in-JS 类选择器
别依赖 lighten()/darken() 生成主题色
这些函数只是对 HSL 明度做线性加减，在深色背景上极易失真：lighten(#121212, 20%) 得到的是灰蒙蒙的 #4a4a4a，文字对比度不足，可访问性不达标。
更可靠的做法是：
- 为每个主题预设语义化颜色值（
text-primary、text-secondary），而非从主色推导 - 需要对比色时，用
color.contrast-color($bg)（来自sass:color模块），它返回#000或#fff中对比度更高的那个 - 慎用
transparentize()或rgba()直接操作 alpha，深色模式下半透明叠加容易糊成一片
真正难的不是写 Sass，而是守住「编译时」和「运行时」的边界——Sass 变量一旦编译完成就固化为 CSS 字面量，JS 改不了，也读不到；想运行时切换，只能靠 CSS 自定义属性或换 CSS 文件。这点一旦混淆，后续所有调试都在对抗工具链本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
