less多品牌主题需变量分离：variables.less定义统一前缀变量，themes/xxx.less仅覆盖差异化项；禁止themes下@import变量文件；构建时用modifyvars注入品牌变量；mixin封装差异逻辑；变量加品牌命名空间防冲突。
Less变量必须分离：variables.less + themes/xxx.less 两层结构
多品牌主题不是靠改几行颜色，而是变量定义方式决定成败。所有可配置项（主色、字体、圆角、阴影强度）必须抽成 @primary-color、@font-family-base 等统一前缀变量，写在独立的 variables.less 中；每个品牌只在 themes/brand-a.less 里覆盖需要差异化的部分，比如：@primary-color: #ff6b35;、@logo-url: url("./brand-a-logo.svg");。
常见错误是把整套变量复制到每个品牌文件里——新增品牌时漏改某个 @spacing-lg，上线后按钮间距突然变大，排查成本极高。
关键约束：
-
themes/下文件禁止@import任何含变量定义的文件（包括 mixins 文件），否则会意外覆盖 - 入口文件按顺序
@import "variables.less"; @import "themes/brand-a.less";，加载顺序即覆盖顺序 - 所有组件样式必须引用
@primary-color，不能写死#ff6b35
构建时生成多份CSS：lessc --modify-var 或 Webpack less-loader 配置
浏览器不运行 Less，所谓“切换”只是预编译 + JS 切换 <link>。用 lessc 命令行或 Webpack 的 less-loader 的 modifyVars 选项注入不同品牌变量：
lessc main.less -o brand-a.css --modify-var="@brand=brand-a"
Webpack 中需在 less-loader 配置里传入对象：{ modifyVars: { 'brand': 'brand-a' } }。注意：变量名必须和 Less 中 @brand 完全一致，大小写敏感。
容易踩的坑：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
modifyVars只接受字符串、数字、布尔值，不能传函数或对象 - 如果变量在
variables.less里有默认值（如@brand: "default";），--modify-var才能覆盖它；没声明就直接@import "themes/@{brand}.less"会报错variable @brand is undefined - Webpack 构建时若缓存未清，可能仍用旧变量编译，建议加
cache: false临时验证
品牌专属样式逻辑用 .brand-mixin() 封装，别堆 .brand-a-only 类
品牌间差异不止颜色，还可能有图标替换、文案微调、布局偏移。这时不能靠一堆 .brand-a-header 类硬写，而应定义带参数的 Mixin：
.brand-header(@logo-url, @padding) {
background: url(@logo-url) no-repeat center;
padding: @padding;
}
然后在各品牌文件中调用：.brand-header(@logo-url, @spacing-xl);。这样新增品牌只需提供新参数，不用重写整块样式。
典型误用：
- 写
.brand-a-only { ... }并期望它自动生效——它只是个类名，JS 不加这个 class 就不会触发 - 在 Mixin 里写
if(@brand = "brand-a") { ... }—— Less 编译期无法根据运行时值分支，且破坏变量集中管理 - 把品牌特有字体写成
@font-face块塞进 Mixin，导致每个品牌 CSS 都重复输出相同字体声明
避免变量作用域污染：所有变量加品牌命名空间前缀
多个品牌共用同一套 Less 编译环境时，@primary-color 这种通用名极易冲突。例如品牌 B 覆盖了品牌 A 的 @primary-color，但某个组件恰好在品牌 A 的样式块里又用了这个变量——结果渲染出品牌 B 的颜色。
解决方案是强制命名空间：
- 变量名统一为
@brand-a-primary-color、@brand-b-primary-color - 在
variables.less里用@primary-color: @brand-a-primary-color;做一次映射，确保组件仍用简洁名 - 品牌文件只声明带前缀的变量，不碰无前缀的映射变量
最常卡住的地方不是语法错误，而是变量被静默覆盖后，编译输出的 CSS 里 background-color 值和你预期不符，却查不到哪里改的——因为 @import 顺序、嵌套引入、甚至 node_modules 里某个依赖的 Less 文件都可能偷偷定义同名变量。每次新增品牌，务必检查最终生成的 CSS 文件里关键变量是否是你手动设的值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
