asp.net - DOTLESS - 用户特定变量

Question

我正在编写一个 ASP.NET MVC 应用程序，并且我计划使用 Dotless 编译器对样式表使用 LESS。我想让我的应用程序可换肤，并发现我可以使用 LESS 变量来自定义样式。

我如何最好地实现这一点？

我希望能够覆盖嵌套层次结构中的变量。我有一个站点范围的variables.less，其中包含所有变量。我现在希望允许每组客户拥有特定的优先权。然后我希望每个客户都有自己的覆盖，但如果未定义某些变量，则使用“组默认值”。然后我想要“用户”覆盖(每个客户有多个用户)。

我想到的另一种选择是创建一个定义所有变量的variables.default.less 文件。然后，我创建一个“覆盖”文件，仅重新定义已更改的变量。这允许我创建一个特定于用户的 less 文件以包含所有嵌套变量覆盖。

示例:

变量.default.less

@bgcolor: #ffffff;
@textcolor: #000000;
@fontsize: 12px;
@logo: "site-default.png";

变量.customergroup01.less

@bgcolor: #cccccc;
@textcolor: #999999;

变量.customer99.less

@logo: "customer-logo99.png";

变量.user1234.less

@font-size: 18px;

现在，如果客户 55 登录(他属于 customergroup01)，他将获得以下样式表

// Import default vars
@import "variables.default.less";

// Import customized vars
@import "variables.customergroup01.less";

// This is the actual stylesheet
@import "styles.less"; 

现在，如果用户 1234(客户 99 和 customergroup01)，他将获得以下样式表

// Import default vars
@import "variables.default.less";

// Import customized vars
@import "variables.customergroup01.less";
@import "variables.customer99.less";
@import "variables.user1234.less";

// This is the actual stylesheet
@import "styles.less"; 

这是一个可用的模式吗？我是否动态渲染自定义的 less 文件或以某种方式创建预编译它们？

谢谢!

Answer 1

Is this a usable pattern?

我想说是的。您的要求是根据用户创建不同的样式表，这似乎是一种明智的方法。我的实现略有不同。我生成一个包含所有核心样式的“base”样式表，然后创建一个包含自定义样式的单独的“主题”样式表(这些样式有自己的类前缀t-)。

示例

无站点

@import "variables.less";
@import "styles.less"; 

无主题

@import "theme-variables.less";

// theme class
.t-btn-submit {
    background-colour: @t-btn-submit-bg;
}

这种方法使我可以很好地分离可更改样式和核心样式之间的关注点。我知道，如果我更改核心样式(也许删除类)，它不会破坏主题，因为它们有单独的类。它还简化了流程，并使其在更新或更改时更易于管理。