Question

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

我如何才能最好地实现这一目标？

我希望能够覆盖嵌套层次结构中的变量。我有一个包含所有变量的站点范围变量。我现在想让每组客户都有一个特定的覆盖。然后我希望每个客户都有自己的覆盖，但是使用＆＃34;组默认值＆＃34;如果没有定义某些变量。然后我想＆＃34;用户＆＃34;覆盖（每个客户有几个用户）。

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

示例：

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";

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

谢谢！

Answer 1

这是一种可用的模式吗？

我会说是的。您的要求是根据用户创建不同的样式表，这似乎是一种明智的方法。我的实现略有不同。我生成一个包含所有核心样式的“ base ”样式表，然后创建一个单独的“ theme ”样式表，其中包含自定义样式（这些样式都有自己的类前缀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; }

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

DOTLESS - 用户特定变量

1 个答案: