DOTLESS - 用户特定变量

Question

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

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

我希望能够覆盖嵌套层次结构中的变量。我有一个站点范围的 variables.less 包含所有变量。我现在想让每组客户都有他们特定的覆盖。然后我希望每个客户都有自己的覆盖，但如果未定义某些变量，则使用“组默认值”。然后我想要“用户”覆盖（每个客户有几个用户）。

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

例子：

variables.default.less

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

variables.customergroup01.less

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

variables.customer99.less

@logo: "customer-logo99.png";

variables.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 和客户组 01），他会得到以下样式表

// 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

这是一个可用的模式吗？

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

示例

无站点

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

无主题

@import "theme-variables.less";

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

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