scss变量不能直接赋值给css变量，必须用#{$var}插值语法注入；map结构需配合map-get()；插值仅生成静态初始值，动态更新须依赖js或html :style。
SCSS变量不能直接赋值给CSS变量
直接写 --color: $primary-color 是无效的。Sass 编译器不会识别这种语法，会原样输出或报错 —— 因为 $primary-color 是编译期变量，而 --color 是运行时属性，二者生命周期不重叠。
必须用 #{$var} 插值语法注入
这是唯一可靠的方式，Sass 在编译时把 SCSS 变量值“展开”成字符串，填进 CSS 自定义属性里。
$primary-color: #3498db;:root { --primary-color: #{$primary-color}; }
编译后生成：:root { --primary-color: #3498db; }，浏览器才能识别。
如果是 map 结构，比如 $theme: (bg: #f8f9fa, text: #333);，得用 map-get() 配合插值：--bg: #{map-get($theme, bg)};
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
别在 :root 以外的地方盲目用插值
插值只在编译期生效，且只对静态值有效。以下写法容易出错：
-
.btn { --color: #{$primary-color}; }—— 每个按钮都重复定义变量，无意义，还可能覆盖全局 -
[data-theme="dark"] { --color: #{$dark-color}; }—— 如果$dark-color是动态计算（如darken($base, 20%)），它仍能工作；但若想靠 JS 后续改这个变量，不行 —— 它只是静态值 - 在
@media或@supports内部插值没问题，但别误以为这能触发运行时响应
想让 CSS 变量真正可变？得靠 JS 或 HTML :style
SCSS 插值只能生成初始值。要切换主题、响应用户操作，必须靠运行时手段：
- 用 JS 修改
document.documentElement.style.setProperty('--primary-color', 'red') - 在 Vue/UniApp 中用
:style="{ '--primary-color': dynamicColor }" - 通过
[data-theme="dark"]类选择器批量覆盖变量（如资料中所示）
插值只是“起点”，不是“终点”。很多人卡在这一步，以为写了 #{$xxx} 就等于实现了动态主题 —— 实际上它只解决“怎么把设计系统里的颜色一次性倒进 CSS 变量”，后续更新还得另走 JS 路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
