0

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

现在我们正在考虑引入 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 标头中引用这些文件的额外处理） - 没有更好的方法吗？

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

4

1 回答 1

0

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

@import "@{brandName}.less";

并将其引用为

<link rel="stylesheet" type="text/css" href="main.less?brandName=foo" />
于 2015-06-01T13:23:08.143 回答