css - 覆盖多个 LESS 文件中的变量

Question

我们有一个平台，在一个界面中包含多个应用程序。有一个通用样式表，出于性能原因，每个应用程序都有单独的样式表。整个平台为几个供应商打上了品牌，每个供应商都有自己的颜色，等等。我们通过为给定的品牌加载另一个样式表来做到这一点，其中只包含默认样式的覆盖。

现在我们正在考虑引入 LESS 来改进和组织我们的样式表。但我们正在努力寻找一个干净的解决方案来调整每个品牌的变量。

这是我们的元素结构:

platform/
    css/
        general.css     (general styles for all applications)
        app1.css        (specific styles for application 1)
        app2.css        (specific styles for application 2)
        ...
        branding1.css   (color overrides for branding 1)
        branding2.css   (color overrides for branding 2)
        ...

有了 LESS，我们会想到这个结构:

platform/
    css/
        variables.less  (containing default colors, etc.)
        general.less    (general styles for all applications)
        app1.less       (specific styles for application 1)
        app2.less       (specific styles for application 2)
        ...
        branding1.less  (variables overrides for branding 1)
        branding2.less  (variables overrides for branding 2)
        ...

现在我们如何轻松地将品牌覆盖应用到所有样式表？

到目前为止我们发现的是为所有样式表创建特定于品牌的 less 文件，例如为 general.less 创建 general.branding1.less:

@import "general.less";
@import "branding1.less";

这为品牌 1 的一般样式创建了预期的结果，当然我们可以为每个应用程序样式表这样做。但这将导致 n*m 文件(应用程序 * 品牌)只有这样两条导入行。这听起来不像是一个很好的解决方案(没有提到在 HTML header 中引用这些文件的额外处理)- 没有更好的方法吗？

注意:我们使用 Web Essentials 在部署前预处理文件。客户端预处理是不可取的。

Answer 1

你可以使用 dotless提供更少的文件并跳过 Web Essentials 编译步骤——预处理仍将在服务器端进行。 Dotless 的 HTTP 处理程序接受来自查询字符串参数的变量值，因此在您的入口点样式表中您可以:

@import "@{brandName}.less";

并将其引用为

<link rel="stylesheet" type="text/css" href="main.less?brandName=foo" />