CSS变量需在:root或父元素style中定义，组件内可直接用var(--name)引用；支持fallback回退、JS动态修改及ngStyle绑定，但SCSS无法读取运行时变量，且大小写敏感、作用域受继承链影响。
在组件模板中用 var() 引用全局 CSS 变量
只要变量定义在 :root 或父元素的 style 属性里，组件内任何 CSS 规则都能直接用 var(--my-color) 拿到值。不需要额外导入或声明。
- 确保变量已在全局样式（如
src/styles.css）中定义：:root { --primary: #3b82f6; --spacing-xs: 4px; } - 组件 SCSS 或 CSS 文件里直接使用：
.btn { padding: var(--spacing-xs) 12px; background-color: var(--primary); } - 若变量未定义，
var(--missing, red)会回退到第二个参数；不写回退值则按 CSS 级联规则继承或使用初始值
在模板中动态设置 CSS 变量（配合 ngStyle）
ngStyle 支持传入以 -- 开头的自定义属性名，Angular 会把它们写进元素的 style 属性，供 :hover 或子元素中的 var() 读取。
- 模板中绑定：
<div [ngStyle]="{'--status-color': item.active ? 'green' : 'gray'}">...</div> - 对应 CSS 中引用：
.status-indicator { border-left: 4px solid var(--status-color); } - 注意：变量只对当前元素及其后代生效；不要在循环中频繁更新大量
ngStyle，否则触发重排开销明显
在 SCSS 中访问 CSS 变量？不行，得换思路
SCSS 编译阶段早于运行时，无法读取 DOM 中的 CSS 变量值。试图在 .scss 文件里写 color: var(--primary) 是合法的，但那是原样输出到 CSS，不是“读取”变量。
- 别写
$color: var(--primary)—— SCSS 会报错，var()不是 SCSS 函数 - 想复用颜色逻辑？把值抽成 SCSS 变量（
$primary: #3b82f6），再同步写进:root，或用构建脚本生成 CSS 变量 - 需要运行时切换主题？靠 JS 修改
document.documentElement.style.setProperty('--primary', '#ef4444')，而不是改 SCSS
ViewEncapsulation 影响 CSS 变量作用域吗？基本不影响
ViewEncapsulation.Emulated（默认）会给组件样式加属性选择器，但 :root 和元素 style 属性里的变量仍能被正常读取——因为变量查找走的是 DOM 树路径，不是 CSS 选择器匹配。
立即学习“前端免费学习笔记（深入）”；
- 即使组件启用了封装，
var(--primary)在组件内依然有效 - 唯一例外是
ViewEncapsulation.ShadowDom：此时:root不再包含宿主文档的变量，需手动把变量注入shadowRoot.host或用:host设置 - 避免滥用
::ng-deep去穿透封装读变量——它不解决变量作用域问题，反而破坏封装意图
--Primary 和 --primary 是两个变量；而且一旦在某个元素上用 style="--x: red" 覆盖了继承链上的值，其所有后代都会基于这个新值计算，不是“覆盖全局”。 
