css - "lessify"一个CSS颜色主题

Question

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

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

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

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

我遇到的问题是组件文件没有获得带有颜色定义的“全局变量”，所以我无法编译导入这些文件的基础文件。

我读过有可能使用“partials”(以 _ 开头的文件不会独立编译而是导入然后编译)，但我的编译器似乎忽略了这个功能，而我的 eclipse 插件用于编辑和验证 less 文件也提示颜色变量未在这些部分上定义。

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

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;

无元素:

@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;
}