Hey there! Let's tackle this Less variable conflict issue you're facing when merging two templates into one CSS file—totally get how frustrating that can be when you're just starting out with Less. Here are some practical, beginner-friendly solutions to fix this:

1. 用命名空间隔离模板代码 #

这是最直观且低改动的方案，把两套模板的变量和样式分别封装到独立的命名空间块中，让变量只在各自的作用域内生效：

// 第一套模板的完整代码包裹在这个块里
.template-one {
  @primary-color: #2c3e50;
  @base-font-size: 16px;

  .header {
    color: @primary-color;
    font-size: @base-font-size;
  }
  // 其他第一套模板的样式...
}

// 第二套模板的完整代码包裹在这个块里
.template-two {
  @primary-color: #e74c3c;
  @base-font-size: 14px;

  .card {
    background: @primary-color;
    font-size: @base-font-size;
  }
  // 其他第二套模板的样式...
}

如果需要在命名空间外引用某个模板的变量，也可以这样获取：

@template-one-primary: .template-one > @primary-color;

2. 结合导入语句与作用域控制 #

如果两套模板原本是独立的.less文件，可以用@import导入时包裹在作用域块里，避免变量全局污染：

// 导入第一套模板并限制作用域
#template-one-scope {
  @import "path/to/template-one.less";
}

// 导入第二套模板并限制作用域
#template-two-scope {
  @import "path/to/template-two.less";
}

这样两套模板的变量就会被各自的作用域块隔离，编译时不会互相覆盖。

3. 手动重命名冲突变量（适合小范围冲突） #

如果冲突的变量数量不多，直接给其中一套的变量加前缀区分也是个简单有效的办法。比如把第二套模板的@primary-color改成@template-two-primary-color，@font-size改成@template-two-font-size。虽然需要手动修改，但逻辑简单，容易维护。

4. 利用Less的块级作用域特性 #

Less的变量遵循块级作用域规则，也就是说在不同的代码块（比如{}包裹的区域）里，同名变量不会互相影响。所以只要把两套模板的代码分别放在不同的块中，就能自动隔离变量。

小建议 #

作为Less新手，我推荐先尝试命名空间隔离的方法，因为它对原有代码的改动最小，而且能清晰区分两套模板的样式边界，方便后续维护。你可以先把其中一套模板的代码包裹起来，测试编译是否正常，再处理另一套。

内容的提问来源于stack exchange，提问作者Ethameshep