"lessify" 一个 CSS 颜色主题

Question

我继承了一个包含大量 CSS 的项目，并被分配了修改它的任务，以便可以轻松更改调色板。

我立即想到了使用CSS预处理器，尝试较少并且可以轻松切换变量的颜色，所以我只需要定义一个基色并可以切换颜色主题。

问题是，每次我切换颜色主题时，我都必须用新的颜色设置覆盖 colors.less 或修改大量文件中的 colors.less 导入。

我想要的是最终得到一个包含大量导入的文件（基本上每个组件或一组组件一个），当我导入 colors-red.less 而不是 colors- 时在该文件上blue.less 使用红色调色板后立即导入的所有组件，例如，编译的主题是红色而不是蓝色。

我遇到的问题是组件文件未获得 "globals" 颜色定义，因此我无法编译导入这些文件的基础文件。

我读过有可能使用 "partials"（以 _ 开头的文件不会独立编译而是导入然后编译），但我的编译器似乎忽略了此功能，并且我用于编辑和验证 less 文件的 eclipse 插件也抱怨颜色变量没有在这些部分上定义。

我怎样才能让部分功能发挥作用？有没有更好的方法来完成这项任务？

Answer 1

Stil, they won't be defined on the imported files, just on the main file, so >compilation will break on the imported files. You see what I mean?

不是吗？示例：

mixins.less:

.mixin()
{
   color: @color;
}

variables.less:

@color: orange;

project.less:

@import "mixins";
@import "variables";
p {
.mixin();
}

现在运行 lessc project.less 输出：

p {
color:orange;
}

现在我把project.less的内容改成如下：

@import "mixins";
@import "variables";
p {
.mixin();
}
@color: red;

然后运行 lessc project.less输出：

p {
color:red;
}

"lessify" a CSS color theme