在多重减档覆盖变量

问题描述

我们必须包含在一个单一的接口，多个应用程序的平台。有一个一般的样式和性能方面的原因单独那些为各种应用场合。这整个平台是品牌的一对夫妇的供应商，有自己的颜色等。我们通过加载另一个样式表只包含的默认样式覆盖指定的品牌这样做。每个人

We have a platform that contains several applications in one single interface. There is one general stylesheet and for performance reasons seperate ones for every application. This whole platform is branded for a couple of vendors, everyone having his own colors, etc. We do so by loading another stylesheet for the given branding that just contains the overrides of the default styles.

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

Now we're thinking about introducing LESS to improve and organize our stylesheets. But we're struggling to find a clean solution for adjusting the variables for each branding.

下面是我们的项目结构：

Here is our project structure:

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

用更少的我们会觉得这个结构：

With LESS we'd think of this structure:

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

现在我们如何能够轻松地运用品牌覆盖到所有的样式？

Now how can we easily apply the branding overrides to all the stylesheets?

什么迄今为止我们发现的是，为 general.less 创建所有样式的具体品牌少的文件，例如创建一般.branding1.less ：

What we've found so far is to create branding-specific less files for all stylesheets, for example for general.less to create general.branding1.less:

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

这会为一般样式品牌1，当然，我们可以为每一个应用程序的样式这样做的所期望的结果。但是这将导致n * m个文件（应用*烙印）只有这样两个导入线。这听起来不像是一个很好的解决方案（不提额外的处理在HTML标题引用这些文件） - ？有没有什么更好的。

This creates the desired result for the general styles of branding 1 and of course we can do so for every applications stylesheet. But this would result in n*m files (applications * brandings) with just such two import lines. This doesn't sound like a nice solution (not mentioning the extra handling to reference these files in the HTML header) - isn't there anything better?

请注意：我们正在使用Web Essentials以preprocess文件在部署之前。客户端preprocessing没有选项。

Note: We're using Web Essentials to preprocess the files before deploying. Client-side preprocessing is no option.

推荐答案

您可以使用服务越少的文件，并跳过网络要点编译步骤 - 在preprocessing仍然是服务器端。不带点'HTTP处理程序接受来自查询字符串参数变量值，所以在您的入口点的样式表，你可以这样做：

You could use dotless to serve the less files and skip the Web Essentials compilation step -- the preprocessing would still be server-side. Dotless' HTTP handler accepts variable values from query string parameters, so in your entry point stylesheet you could do:

@import "@{brandName}.less";

和引用它

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

这篇关于在多重减档覆盖变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！