Less变量与CSS变量不能无缝混用，因二者分属编译时静态替换和运行时动态计算机制；Less不识别--前缀语法，需用@{}插值硬编码值，但会丧失CSS变量的动态性。
不能无缝混用。Less变量和CSS变量（:root里的--color-primary）是两套完全独立的机制，编译阶段就已分离——Less变量在构建时被静态替换，CSS变量在浏览器运行时才计算。
Less变量无法直接赋值给CSS变量
常见错误写法：--primary: @primary-color; 会报错 ParseError: Syntax Error，因为 Less 解析器不识别 -- 前缀的自定义属性语法，也不允许在声明中混用预处理器变量和原生 CSS 变量。
- 正确做法是用字符串插值：
--primary: @{primary-color};（注意必须用@{}包裹） - 但要注意：这仅把值“硬编码”进 CSS，失去 CSS 变量的动态能力（比如 JS 修改
document.documentElement.style.setProperty('--primary', 'red')不会影响该行） - 如果想保留运行时可变性，就得放弃 Less 变量参与赋值，改用纯 CSS 变量定义 + JS 控制
如何让CSS变量在Less嵌套中安全引用
Less 本身无法读取运行时的 CSS 变量值，所以 color: var(--primary); 这种写法在 Less 里是合法的，但它是“透传”，不是“引用”。你不能对 var(--primary) 做运算或条件判断。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 嵌套中直接写
var(--primary)没问题，它会被原样输出到 CSS - 别试图用
@{}插入：color: var(@{--primary});——@{--primary}会解析失败，因为--primary不是合法 Less 变量名 - 若需在 Less 中做颜色衍生（如
lighten(@primary-color, 10%)），只能基于 Less 变量，不能基于var(--primary)
混合使用时的典型陷阱
开发者常以为 “用了 CSS 变量就能热更新主题”，结果发现 Less 编译后所有 var(--xxx) 都还在，但主题色没变——问题往往出在构建流程或作用域。
立即学习“前端免费学习笔记（深入）”；
-
:root中定义的--primary必须在所有 Less 文件编译前已存在，否则var(--primary)会 fallback 到继承值或initial - Webpack 或 Vite 的
less-loader默认不支持@import (css)导入含 CSS 变量的文件，需显式配置additionalData注入全局变量 - Vue 单文件组件中
<style lang="less">无法访问<style>里定义的 CSS 变量，它们属于不同作用域
真正需要动态主题切换时，Less 变量只适合做构建时分支（如 dark/light 模式分别编译），而 CSS 变量才是运行时方案——两者定位不同，强行“混用”反而模糊了职责边界。
