DOTLESS特定于用户的变量

Question

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

我该如何最好地实现它呢？

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

我想到的另一种方法是创建一个定义所有变量的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和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

这是一个可用的模式吗？

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

示例

Site.less

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

Theme.less

@import "theme-variables.less";

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

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