Question

我们有一个基于LESS的样式表，我们希望生成多种颜色变化。我们已经定义了一个包含颜色变化的包含文件（现在是blue.less），并希望生成并使用此包含文件的绿色和红色变体。

我们想要做的是以某种方式通过命令行进行参数化以包含这些特定颜色文件中的一个。有谁知道如何做到这一点？

Answer 1

将颜色定义放入单独文件中的变量中，例如。 blue.less：

@baseColor: #0000ff;  // blue
@accentColor: #00ffff;  // yellow?

然后创建一个单独的主题文件，例如。 theme.less，您可以在其中定义如何更改基色以实现主题：

@link-color: @baseColor;
@link-hover-color: darken(@link-color, 15%);
@panel-header-highlight-color: darken(@accentColor, 15%);
...

然后在第三个文件中，例如layout.less，您定义

a { 
    color: @link-color;
    &:hover {
        color: @link-hover-color;
    }
}
...

最后，创建您的blue-master.less：

@import "blue.less";
@import "theme.less";
@import "layout.less";

要创建red-master.less，您只需要编写一个颜色文件并在上面更改一行。

你可以调用颜色文件color.less，例如有blue/color.less和red/color.less，并使用--include-path=..参数lessc使其根据命令行参数生成不同的文件，但我会反对它（它在我的经历中变得更加艰苦。）