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)
        ...

我们会想到这种结构：

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)
        ...

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

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

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

这为一般的品牌风格1创建了所需的结果，当然我们也可以为每个应用程序样式表执行此操作。但这会产生n * m个文件（应用程序*品牌）只有这两个导入行。这听起来不是一个很好的解决方案（没有提到在HTML标题中引用这些文件的额外处理） - 还有什么更好的吗？

注意：我们在部署之前使用Web Essentials预处理文件。客户端预处理是没有选择的。

Answer 1

您可以使用dotless来提供较少的文件并跳过Web Essentials编译步骤 - 预处理仍然是服务器端的。 Dotless'HTTP处理程序接受来自查询字符串参数的变量值，因此在您的入口点样式表中可以执行以下操作：

@import "@{brandName}.less";

并将其引用为

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

覆盖多个LESS文件中的变量

1 个答案: