less和sass无法读取运行时css变量，因二者在构建阶段完成编译，而var(--x)是浏览器渲染阶段才解析的运行时特性；直接写color: var(--color)可原样输出，但若--color未定义、作用域错误或被覆盖，则运行时失效。
Less 和 Sass 都不能读取运行时的 CSS 变量（var(--x)），所谓“混用失效”，本质是把编译期变量和运行时变量当成同一套机制在用——它们根本不在一个时间维度上工作。
为什么 var(--color) 在 Less/Sass 里写出来却没效果
浏览器只在渲染阶段解析 var(--color)，而 Less/Sass 在构建阶段就结束了。你在 Less 文件里写 color: var(--color);，它会被原样输出到 CSS；但如果 --color 没在 :root 或父元素中定义，或者被更高优先级规则覆盖，DevTools 里就会显示 unset 或直接 fallback 到继承值。
- 不是编译失败，而是运行时找不到变量定义：检查 HTML 中是否漏了
<style>:root { --color: #007bff; }</style> - 作用域搞错：组件内部写
.card { --color: red; }，那var(--color)只对.card及其子元素生效，外部调用无效 - 优先级被覆盖：多个
:root块或 JS 动态注入导致后写的覆盖前写的，用 DevTools 的 “Computed” 面板看最终生效的是哪条
Less/Sass 变量怎么安全转成 CSS 变量
必须靠插值（#{$color} 或 @{color}）把预处理器变量展开为字符串，再塞进 --xxx 声明里。直接写 --color: $color; 或 --color: @color; 会整行被 Sass/Less 编译器跳过。
- Sass：用
#{$primary-color}，不能多空格：# { $primary-color }失效 - Less：用
@{primary-color}，注意不是@primary-color（那是变量引用，不是插值） - 批量生成时别嵌套 map：Sass 的
@each $k, $v in $map可以，但$theme: (light: (bg: #fff))这种结构必须扁平化，否则--#{$k}会输出--light: (bg: #fff)，浏览器不认
混用时样式突然不生效的三个高发场景
不是语法错，而是变量链断在某个环节，且错误静默——编译通过，但运行时空白或回退。
-
@import顺序颠倒：Less 中.btn { color: @primary; }写在@import "vars.less";前面 → 编译时@primary是 undefined，Less 静默当0或空字符串，输出color: ;，浏览器忽略整条声明 - scoped 样式隔离：Vue 单文件组件里
<style lang="less" scoped></style>，即使@import "@/styles/vars.less"成功，CSS 变量仍需在 DOM 上显式存在，否则var(--x)查无此变量 - Sass 的
!default和 Less 的覆盖逻辑冲突：Sass 要求未声明变量必须加!default才能 fallback，Less 则后@import直接覆盖——混用同一套变量文件时，一个编译报错，另一个静默覆盖，行为不可控
最易被忽略的一点：CSS 变量名必须以 -- 开头，且只支持字母、数字、下划线、短横线；用 #{to-lower-case($Name)} 或 @{name-123} 生成变量名时，务必确保结果合法，否则浏览器直接丢弃整条 --xxx 声明，连 warning 都不报。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
