less无真正命名空间，需用mixin封装+显式传参控制作用域；变量默认全局，重复定义会覆盖；&仅影响选择器拼接，不改变变量查找路径；跨文件共享变量须单点定义、只读不写；其编译时静态解析，无法实现css-in-js的运行时局部作用域。
Less 命名空间怎么写才不被全局污染
Less 的 .namespace 本身不是语法关键字，而是靠选择器嵌套模拟的“命名空间”——本质是加前缀。直接写 .ui-button { .primary { color: blue; } }，编译后就是 .ui-button .primary，它不创建作用域隔离，只是视觉分组。
常见错误是以为用 & 或 @import 就能像 JS 模块一样封闭变量。实际不行：所有 @variable 默认全局可见，嵌套规则里的 @color 一旦在同一次编译中重复定义，后定义的会覆盖前定义的。
- 真正控制作用域，得靠
.mixin封装 + 显式传参，比如.btn-style(@bg: #007bff) { background: @bg; } - 想复用一组变量又不冲突？用
.mixin包一层再调用，别裸写@color -
@import (reference)可以导入但不输出 CSS，适合抽离变量/mixin，但它仍会把变量注入全局作用域
嵌套规则里 & 的作用和陷阱
& 是 Less 中唯一能精确控制父选择器拼接方式的符号，但它不会改变变量查找路径——变量依然按定义位置向上查找，不是按 & 的嵌套层级。
典型翻车场景：.card { @padding: 16px; &__header { padding: @padding; } &__body { @padding: 24px; padding: @padding; } }。这里第二个 @padding 会覆盖第一个，导致 &__header 实际用的是 24px。
立即学习“前端免费学习笔记（深入）”；
-
&只影响生成的选择器结构，不影响变量/混合的作用域 - 需要局部变量？必须用 mixin 参数或
let（Less 4.0+ 支持，但兼容性差，不建议依赖） - 想让
&__header和&__body各用各的间距？写成两个独立 mixin，或用 map 结构存配置再取值
如何安全地跨文件共享变量而不打架
多个 @import 文件都定义了 @primary-color，最终生效的是最后一个 import 的值——Less 不做变量合并，只做线性覆盖。
这不是 bug，是设计如此。所以 “共享变量” 必须有明确的单点定义源，其他地方只读不写。
- 建一个
variables.less，只放@primary-color: #007bff;这类基础定义，禁止在里面写任何 mixin 或样式规则 - 业务组件文件用
@import "variables";，但绝不要在组件里重新赋值@primary-color - 如果某组件需要定制色值，用 mixin 参数接收，而不是改全局变量，例如
.alert(@color) { border-left-color: @color; } - 构建工具如 webpack 的 less-loader 若开启
javascriptEnabled，可能意外暴露 JS 变量，引发作用域混淆，非必要不开启
Less 作用域与 CSS-in-JS 的根本区别在哪
Less 编译时静态解析，没有运行时作用域概念；CSS-in-JS（如 styled-components）靠 JS 闭包实现真正的局部作用域。这是底层模型差异，不是写法能绕过的。
你没法在 Less 里写出类似 const Button = styled.div`color: ${props => props.theme.primary};` 的动态作用域。所有变量、mixin 都在编译阶段展开、扁平化，最后只剩纯 CSS。
- 想模拟“主题切换”？只能预编译多套 CSS，或靠 class 切换 + 属性选择器（如
[data-theme="dark"] .btn） - 想让变量随环境变化？得交给构建层（如 postcss-variables + 环境变量），Less 本身做不到
- 最易忽略的一点：
@plugin加载的 JS 插件，其作用域独立于 Less 变量系统，不能互相访问，调试时容易误以为变量该生效却没生效
