scss变量仅在构建阶段被替换为固定值，编译后彻底消失，浏览器无法识别或修改；真正支持运行时动态切换的是css自定义属性（如--primary-color），需通过js操作style.setproperty()并配合var()引用实现。

SCSS变量根本不在浏览器运行时环境里，它在构建阶段就被替换成固定值，编译后的CSS文件中一个$符号都不会留下——所以你根本没法“修改”它。

SCSS变量编译后就彻底消失

你写的$primary-color: #409eff，经过sass或vite编译后，所有color: $primary-color全变成color: #409eff。浏览器加载的只是纯CSS，它既没见过$primary-color，也不存在这个实体。

• document.documentElement.style.setProperty('$primary-color', 'red')会报错，因为这不是合法CSS属性
• DevTools的Styles面板里搜$primary-color，什么都找不到
• getComputedStyle(el).getPropertyValue('$primary-color')返回空字符串，不是undefined，是压根不识别

为什么@if $theme == 'dark'切不了主题

@if是Sass编译期指令，只在你执行sass main.scss或启动开发服务器时运行一次。此时document还没创建，localStorage、prefers-color-scheme、按钮点击事件全不可见。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 写$theme: 'dark'再改JS状态，样式不会响应——编译时已决定用哪套规则
• 用vue-cli-plugin-style-resources-loader注入变量，也只是把变量提前塞进每个SCSS文件，仍无法运行时更新
• 输出的CSS里没有@if分支，只有被选中的那部分，其余逻辑被完全丢弃

真正能动态修改的只有CSS自定义属性

浏览器原生支持--primary-color这类CSS变量，可通过style.setProperty()实时写入，并触发重绘。SCSS的作用，仅仅是帮你安全生成var(--primary-color)语句，而不是替代它。

• 必须用:root { --primary-color: #409eff; }声明，不能写:root { $primary-color: #409eff; }（语法错误）
• 在SCSS中引用要写成color: var(--primary-color);，不能写color: $primary-color;
• 需要降级时，顺序很重要：color: #409eff; color: var(--primary-color);，否则旧浏览器直接忽略整条声明

最容易被忽略的是：SCSS源码里的$和最终浏览器里的--之间没有自动映射关系，必须靠#{$primary-color}插值显式注入，且一旦插值完成，就失去了运行时可变性——所以别把动态逻辑塞进SCSS变量里，该交给CSS变量的，就只交给CSS变量。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！