这不是 Less 编译问题，而是浏览器运行时解析 CSS 的行为：当 var(--color) 未定义时，border 简写中 color 分量被视为 invalid，导致各方向 border-*-color 展开值为空字符串。
为什么 border: 1px solid var(--color) 编译后各方向颜色为空
这不是 Less 编译的问题，而是浏览器在运行时解析 CSS 的行为：当 var(--color) 未定义（比如没在 :root 或父级作用域声明），border 简写中的 color 分量会被视为 invalid at computed-value time，导致 border-top-color、border-right-color 等展开属性值全为空字符串。你用 document.styleSheets[0].cssRules[0].cssText 读到的不是编译结果，是浏览器降级后的运行时表现。
Less 里写 border 要避开哪些坑
Less 本身不干涉 var()，但容易因变量未定义或作用域错位，让问题提前暴露。关键不是“怎么让 Less 编译过去”，而是确保运行时有值：
-
var(--primary)必须在:root或目标元素祖先上明确定义，不能只靠@import拼凑——Less 不管 CSS 变量作用域，只管自己变量 - 别在 Less 变量里拼
var()：@border: 1px solid var(--primary); border: @border;→ 这会让 Less 尝试解析var(--primary)，报ParseError: Unrecognised input - 要透传，必须用
~"1px solid var(--primary)"，但注意：这会把整个值当字符串输出，无法和 Less 变量动态组合 - 推荐解法：用 Less 变量兜底 + 同时声明 CSS 变量，例如：
@primary-color: #007bff; :root { --primary: @primary-color; }
如何验证是 CSS 变量缺失而不是 Less 错误
打开浏览器开发者工具，选中元素 → 查看 Computed 面板 → 找 border-color。如果显示 invalid 或 currentcolor（且 color 也未定义），基本可确认是 --primary 根本没声明。Less 编译日志里不会报这个错，它压根不检查 CSS 变量是否存在。
- 快速检查：在控制台执行
getComputedStyle(document.documentElement).getPropertyValue('--primary')，返回空字符串即未定义 - Vue / React 单文件组件中，每个
<style lang="less">是独立作用域，@import的变量不会自动注入到:root，得手动加:root { --x: @x; } - Webpack 构建时若用了
modifyVars，它只影响 Less 变量，对var(--x)完全无效
真正要修的不是 Less，是 CSS 变量链路
Less 编译器从不解析 --xxx，所以它不会报错也不会修正。所有“border 颜色消失”类问题，根源都在运行时变量缺失或作用域断裂。最常被忽略的是：CSS 自定义属性不继承、不跨 shadow DOM、不随 @import 传播——它只靠 DOM 树查找，跟 Less 文件结构完全无关。
立即学习“前端免费学习笔记（深入）”；
