css - 少 CSS : driving includes through parameters

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 使其根据命令行参数生成不同的文件，但我建议不要这样做(根据我的经验，使用它会变得更加困难)。