JS 中设置 CSS 变量必须用 style.setProperty('--name', value)，不可用点语法；全局设 document.documentElement.style.setProperty()；值需含单位；变量作用域遵循局部覆盖全局规则；主题配置应通过 JS 注入而非构建时替换。
怎么把 JS 里的值塞进 CSS 变量里
直接赋值就行，但得用 style.setProperty()，别用 style.cssText 或直接点语法——后者不支持变量名含横线或动态拼接。
常见错误是写成 element.style.--primary-color = 'red'，这会报错：JS 属性名不能带横线，且 -- 开头的不是合法标识符。
- 必须用
element.style.setProperty('--primary-color', 'red') - 如果变量要全局生效，改
document.documentElement.style.setProperty(...) - 值里有单位（比如
2px、1.2em）必须连单位一起传字符串，CSS 变量不自动补单位 - 传函数调用结果（如
getComputedStyle(...).getPropertyValue('--size')）要注意返回的是计算后值，可能带空格或引号，建议用trim()清理
CSS 变量在 :root 和局部作用域里谁赢
局部作用域覆盖 :root，但“局部”得真局部——得是该元素自身 style 属性或其 class 里显式声明的 --xxx，不是父元素设了你就自动继承。
容易踩的坑是以为“父元素设了 --color，子元素 color: var(--color) 就一定拿到”，其实没问题；但若子元素自己也写了 --color，哪怕只在某个媒体查询里，它就立即生效并覆盖父级。
立即学习“前端免费学习笔记（深入）”；
-
:root是全局兜底，适合配色、间距等基础值 - 组件级变量建议写在组件根元素的
class里（如.card { --card-padding: 16px; }），别全堆:root - 用
var(--x, red)的 fallback 时，fallback 不参与级联，只在变量未定义时起作用，不会“退到父级变量”
用 var() 做响应式断点适配靠谱吗
靠谱，但别指望它替代媒体查询逻辑——CSS 变量本身不触发重排重绘，但它的值变了，依赖它的属性（如 padding、font-size）才会重新计算。
典型场景是统一控制一组组件的尺寸缩放比例，在不同屏幕下切变量值，比每个地方写一遍媒体查询干净。
- 变量值变更需配合 JS 主动设置（如监听
resize后调setProperty），CSS 自己不会“感知”断点变化 - 别在
@media里反复覆盖同一变量，浏览器会按顺序执行，最后一条生效，但可读性差，建议用 JS 统一管理 - 注意单位一致性：如果
--gap在小屏是8px，大屏是2rem，那所有用var(--gap)的地方都会切换单位，确保设计系统能接受这种混用
Webpack/Vite 项目里怎么让 CSS 变量和主题配置联动
不能靠构建时替换（如 process.env.THEME 插入 CSS），因为 CSS 变量是运行时机制；正确做法是把主题配置从 JS 注入到 CSS，再由 CSS 消费。
常见错误是试图在 .css 文件里写 --color: process.env.COLOR，这根本不会被解析——构建工具不处理 CSS 里的 JS 表达式。
- 主题配置写成 JS 对象（如
themes/dark.js），启动时用Object.entries().forEach批量调setProperty - Vite 用户可利用
import.meta.glob动态加载主题文件，避免打包进所有主题 - 需要 SSR 支持？服务端渲染时也要同步执行一次变量注入，否则首屏样式错乱
- 别把敏感信息（如 API key）塞进 CSS 变量——它明文暴露在 DevTools → Styles 面板里
变量名要不要加命名空间（比如 --myapp-color-primary）这事看着琐碎，但团队协作时漏掉，三个月后你翻出 --border 不知道是谁设的、在哪设的，就只能全局搜索加猜。留个前缀成本很低，省下的排查时间够写两屏代码。
