【发布时间】：2015-01-20 10:52:19
【问题描述】：
假设我们有一个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-file 编译成多个css 文件。我也不知道这是否是正确的方法。 不过，在 css 文件顶部声明变量的想法让我很高兴。
所以我想知道：LESS 是否能够解决这个问题？ （如果是这样，怎么做？） 或者有没有更好的方法来解决这个问题？
【问题讨论】：
-
Less 可以帮助你。您可以在 main.less 文件中使用变量，然后为每个单独的主题文件中的变量设置不同的值（以及对主 Less 文件的导入引用），并且在编译时，Less 编译器可以为您创建不同的主题文件，具体取决于关于变量值。不幸的是，我是用手机输入的，所以无法提供工作示例。
-
正如@Harry 所说，您可以使用变量。制作一个像
@mainColor: #someHEXValue;这样的变量，并在整个样式表中使用该变量。而且很容易改，比如@mainColor: #newHEXValue; -
@Harry 谢谢！我想我完全明白你的意思。所以我在 main.less 中定义变量，当我导入它时，我只需更改变量（如有必要）
-
@Vucko 这对我来说已经很清楚了。我没有掌握的是导入文件然后只更改变量的想法。
-
@fabigler：是的，伙计。就像 Vucko 在上面发布的一样，你的 main.less 可以说
background-color: @theme-color，在蓝色主题文件中你指定@theme-color: #00f;，在红色主题文件中指定@theme-color: #f00;。 Less 不会延迟加载变量，因此为变量定义的最新值会胜出。