Less 不支持直接嵌套 CSS 原生变量，因其编译期早于浏览器运行期；--color 等自定义属性会被当作字符串原样输出，无法参与运算或替换；正确做法是用 @ 变量存储变量名字符串，再通过 @{ } 插值安全注入 var()。
Less 本身不支持直接嵌套 CSS 原生变量（即 --my-var 自定义属性），因为 Less 编译发生在 CSS 运行前，而原生变量是运行时由浏览器解析的。强行混用会导致编译失败或值丢失——这不是写法问题，而是阶段错位。
为什么不能直接在 Less 嵌套里用 --color？
Less 编译器只识别 @ 开头的变量，遇到 -- 开头的会被当作普通字符串原样输出，不会参与计算或拼接。更关键的是：嵌套规则（如 .parent { .child { color: var(--color); } }）中，var(--color) 虽然语法合法，但无法被 Less 解析为变量引用，也不能参与运算、拼接或条件判断。
-
var(--primary)在 Less 中只是文本，不是表达式，不能和@spacing * 2运算 - 嵌套内使用
var(--x)不会触发 Less 的变量替换，也不会报错，但失去预处理意义 - 若你试图用
@{--color}或类似写法，编译会直接报错：ParseError: Syntax Error
想让 Less 和 CSS 变量协同工作，该怎么做？
核心思路：用 Less 管理“生成逻辑”，把最终要注入的原生变量名作为字符串安全输出，不尝试解析它。
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 用
@变量存原生变量名（字符串），再用插值@{}注入：@cssVarName: "--text-color";.btn { color: var(@{cssVarName}); } - 避免在嵌套中对
var()做运算，所有计算必须在 Less 层完成，再赋给原生变量：@base: #333;@dark: darken(@base, 10%);:root { --text-dark: @{dark}; } - 媒体查询嵌套内可用原生变量，但仅限输出，不可参与 Less 条件分支：
@mobile: 768px;@media (max-width: @mobile) { .card { background: var(--card-bg); } }
嵌套里误用 var() 的典型错误现象
常见症状不是报错，而是样式失效或值未生效，尤其在动态主题切换场景下：
立即学习“前端免费学习笔记（深入）”；
- 嵌套中写
.theme-dark { .text { color: var(--text-light) * 1.2; }→ 编译后变成无效 CSS，浏览器忽略整条声明 - 用
&:hover { background: var(--bg-hover); }没问题，但若写成&:hover { background: lighten(var(--bg-hover), 10%); }→ Less 报错，lighten无法处理字符串 - 变量作用域混淆：在嵌套块内重新声明
@color: var(--accent);→ 实际生成@color: "var(--accent)";，后续调用color: @color;输出字符串而非颜色值
真正安全的做法，是把 Less 当作“CSS 生成器”，原生变量只出现在 var() 或 :root 赋值位置；所有逻辑、计算、复用都用 @ 变量完成。二者分工明确，才能避免编译期和运行期的语义冲突。
