Less局部变量仅在声明的嵌套块内有效，不会泄漏至外层；嵌套中重定义同名变量会覆盖外层值并影响后续引用；跨层级共享需提至全局或显式@import统一变量文件。
局部变量只在嵌套块内有效，不会泄漏到外层
Less里用@padding: 16px;在.card { }内部声明，这个变量就只属于.card作用域。它不会自动“冒出来”让body或header拿到——这不是bug，是编译期静态作用域的必然行为。
常见翻车场景：.card { @color: red; &__title { color: @color; } } .other { color: @color; } → 第二行直接报错Variable @color is undefined。
- 嵌套中重定义同名变量会覆盖外层值，影响后续同名引用（比如
&__body { @padding: 24px; }会让&__header也用上24px） - 想复用配置？别赋值，改用
.mixin(@p: 16px) { padding: @p; }传参调用 - 真要跨层级共享？把变量提到最外层，或用
@import显式引入统一变量文件
@import不是模块加载，而是文本拼接
@import语句不创建隔离作用域，它只是把目标文件内容原样插进来。所以“局部变量无法生效”，往往是因为你误以为button.less能自动继承variables.less里的变量——其实它根本没被@import过。
典型错误：@import "button.less"; @import "variables.less"; → button.less编译时@primary-color还没出现。
立即学习“前端免费学习笔记（深入）”；
- 必须保证所有
variables.less、mixins.less在@import链最前面 - 组件文件开头必须显式写
@import "../core/variables.less";，不能靠“全局注入”幻想自动可用 - 别信
@import (once)能解决作用域问题——它只防重复引入，不改变变量可见性
!default不是万能兜底，只对未声明变量生效
@primary-color: #007bff !default;看起来像保险，但前提是这个变量**之前没被硬编码定义过**。如果UI库源码里已经写了@primary-color: #007bff;（没带!default），你的!default就彻底失效。
更隐蔽的问题：Webpack的less-loader若配了additionalData，它会把注入内容插在每个文件最开头——你写的!default可能变成第二次声明，直接被忽略。
-
!default只在变量“首次声明”时起效，不是运行时覆盖开关 - 主题覆盖必须走明确链路：
theme-dark.less先@import variables.less，再重写@primary-color: #1a1a1a;，最后@import button.less - 多文件同名变量，以
@import顺序中最后一个为准，没有合并逻辑
别把Less变量和CSS变量混为一谈
@primary-color在编译完就消失了，生成的是color: #007bff;；而--primary-color是浏览器运行时才解析的。想让JS控制样式？唯一可靠路径是：Less里写color: var(--primary-color, #007bff);，JS用document.documentElement.style.setProperty('--primary-color', 'red')改。
试图用@{theme}拼var(--@{name})？编译结果是字面量var(--primary-color)，但若--primary-color没在:root定义，fallback又漏写，文字可能直接变透明。
-
@{}插值只支持选择器、url()、字符串值，不能拼属性名或var()参数 - 构建期导出Less变量给JS用（如
less-plugin-js-vars）是单向快照，JS改了不影响CSS - 热更新时，
additionalData注入不同步会导致样式闪动——这说明你依赖的不是变量本身，而是注入时机
@import顺序错位，或一次嵌套里无意识的重声明，就足以让整条样式链失效。 
