将一个less文件编译成多个css文件

Question

假设我们有一个名为main.css的文件，其内容如下（当然，这种情况非常简化）：

body {
  background-color: #ffffff;
}

然而，还有一些主题具有不同的背景颜色。因此，我们最终需要五个不同的CSS文件：

• main.css
• main_blue.css
• main_red.css
• main_yellow.css
• main_green.css

但现在它真的已经无法维护了。如果我必须更改 main.css 中的某些内容，我还必须更改其他文件！

所以我在网上浏览，并瞥了一眼 http://lesscss.org/ ，这似乎非常有前途。 然而，我不知道如何将一个 less 文件编译成多个 css 文件。也不知道这是否是正确的方法。 尽管在 css 文件顶部声明变量的想法使我很高兴。

所以我想知道：LESS 能否解决这个问题？（如果可以，如何解决？） 或者有更好的方法来解决这个问题吗？

- Fabian Bigler

---

少许修改可以帮助你。你可以在主要的 main.less 文件中使用变量，然后在每个单独的主题文件中为变量设置不同的值（同时将主 Less 文件导入引用），在编译时，Less 编译器可以根据变量值为你创建不同的主题文件。不幸的是，我正在手机上打字，无法提供有效的示例。 - Harry

正如@Harry所说，您可以使用变量。像@mainColor: #someHEXValue;这样创建一个变量，并在整个样式表中使用它。而且很容易更改它，比如@mainColor: #newHEXValue;。 - Vucko

@Harry 谢谢！我明白你的意思了。 所以我在 main.less 中定义变量，当我导入它时，如果需要，我只需更改变量即可。 - Fabian Bigler

@Vucko 我已经明白了。我没有理解的是导入文件然后只更改变量的想法。 - Fabian Bigler

@fabigler：没错，伙计。就像Vucko在上面发布的那样，你的main.less文件可以写成background-color: @theme-color，然后在蓝色主题文件中给@theme-color赋值为#00f;，在红色主题文件中给@theme-color赋值为#f00;。Less会进行变量的延迟加载，所以最后定义的值会生效。 - Harry

@Harry 真是太棒了，伙计！懒程序员的懒加载。太喜欢了！ - Fabian Bigler

Answer 1

感谢Harry的评论，我最终得到了以下解决方案： 对于每个主题，只需创建另一个.less文件，内容如下：

@import "main.less";
@mainbackground-color: #96c8fd;

请注意，在导入之后还会有更多的变量。

- Fabian Bigler