我继承了一个包含大量 CSS 的元素,并被分配了修改它的任务,以便可以轻松更改调色板。
我立即想到了使用 CSS 预处理器,尝试较少并且可以轻松切换变量的颜色,所以我只需要定义一个基色并可以切换颜色主题。
问题是,每次我切换颜色主题时,我都必须用新的颜色设置覆盖 colors.less
或修改 colors.less
导入大量文件。
我想要的是最终得到一个包含大量导入的文件(基本上每个组件或一组组件一个),当我导入 colors-red.less 而不是 colors-blue.less all 时在该文件上例如,使用红色调色板后立即导入的组件因此编译的主题是红色而不是蓝色。
我遇到的问题是组件文件没有获得带有颜色定义的“全局变量”,所以我无法编译导入这些文件的基础文件。
我读过有可能使用“partials”(以 _ 开头的文件不会独立编译而是导入然后编译),但我的编译器似乎忽略了这个功能,而我的 eclipse 插件用于编辑和验证 less 文件也提示颜色变量未在这些部分上定义。
我怎样才能让部分功能发挥作用?有没有更好的方法来完成这项任务?
最佳答案
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;
}
关于css - "lessify"一个CSS颜色主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28415667/