“减少”一个CSS颜色主题

Question

我已经继承了一大堆CSS的项目，并被分配了修改它的任务，因此可以很容易地更改调色板。

我已经立即想到使用CSS预处理器，尝试减少和轻松地切换变量的颜色，所以我只需要定义基本颜色，并可以切换颜色主题。

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

我想要的是带有大量导入的单个文件（基本上每个组件或一组组件），并在该文件导入colors.red.less而不是颜色blue.less例如，在使用红色调色板之后立即导入所有组件，以便编译的主题是红色而不是蓝色。

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

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

我怎样才能得到部分工作？有没有更好的方法来完成这项任务？

Answer 1

Stil，它们将不会在导入的文件上定义，只是在主文件上，所以>编译将在导入的文件上中断。你明白我的意思吗？

不是吗？例如：

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