less变量作用域仅由定义位置决定，无块级作用域；嵌套中同名变量后定义覆盖先定义，全局生效。
Less变量作用域只看定义位置，不看嵌套层级
Less里没有“块级作用域”这种东西。写在 .card { @padding: 16px; } 里的 @padding，不是只对 .card 有效——它会覆盖之前所有同名变量，后续任何地方引用 @padding 都拿到 16px，哪怕在 .header 或另一个文件里。
常见翻车场景：.card { @color: red; &__title { color: @color; } &__body { @color: blue; color: @color; } }，结果 &__title 的颜色是 blue，因为第二个 @color 覆盖了第一个。
- 想真正局部化？别裸写变量，改用
.mixin封装 + 参数传入，比如.card-style(@bg: #fff, @text: #333) { background: @bg; color: @text; } - 嵌套里需要不同值？用 map 结构存配置再取，比如
@spacing: { card: 16px, header: 24px }; padding: extract(@spacing, card); - Less 4.0+ 的
let()语法支持局部变量，但 Webpack/Vite 默认 less-loader 不启用，兼容性差，不建议依赖
嵌套选择器 ≠ 作用域隔离，顶层类名才是关键
写 .user-card { .name { font-weight: bold; } }，编译后是 .user-card .name，这靠的是选择器前缀，不是变量作用域。但它能防止样式漏出，前提是顶层类名唯一且语义明确。
容易被忽略的坑：div { .button { color: red; } } 编译成 div .button，这个规则可能匹配到任意 div 下的 button，完全不可控。
- 顶层必须用业务语义类名，如
.profile-card、.checkout-step，禁用泛型标签或 ID - HTML 容器必须加上该类，否则生成的 CSS 规则不会生效（比如没加
class="profile-card"，那.profile-card .name就永远不匹配） - 嵌套深度别超过 4 层，否则生成的选择器太长，影响浏览器 CSS 匹配性能
跨文件变量共享必须单点定义 + !default 控制覆盖时机
@import 是线性执行的，变量按导入顺序覆盖。如果两个文件都写了 @primary-color: #007bff;，后 @import 的那个才生效——这不是 bug，是 Less 的设计逻辑。
典型错误：组件文件里直接写 @primary-color: #2563eb;，结果构建时因导入顺序变化，值被其他文件覆盖，调试时发现 DevTools 里 computed 值对不上。
- 所有基础变量统一放在
variables.less，每行末尾加!default：@primary-color: #007bff !default; - 项目级覆盖只在入口
index.less或overrides.less中写：@primary-color: #2563eb;（不加!default） - Webpack 的
less-loader要确保paths配置正确，否则@import "variables"找不到文件，变量根本不会加载
& 符号只拼接选择器，不改变变量查找路径
& 是 Less 里唯一能控制父选择器拼接方式的符号，但它和变量作用域完全无关。变量始终按定义位置向上查找，不是按 & 的嵌套层级找。
比如：.card { @padding: 16px; &__header { padding: @padding; } &__body { @padding: 24px; padding: @padding; } }，&__header 拿到的是 24px，不是 16px。
- 需要每个子模块用独立间距？拆成两个 mixin：
.card-header(@p: 16px) { padding: @p; }和.card-body(@p: 24px) { padding: @p; } - 想复用又不想污染？用
@import (reference)导入变量文件，它不输出 CSS，但变量仍注入全局作用域——所以还是得靠单点定义 - 慎用
&:hover::before这类多层伪类组合，某些 Less 版本编译会失败，优先拆成独立规则
@import 顺序，样式就会在构建后悄无声息地错位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
