动态操作 LESS 变量

Question

这是一个多部分问题。

其基本要点是我想要一个网站，用户可以通过下拉列表等方式更改网站的配色方案。我的 LESS 文件的顶部看起来像这样：

@primaryColor: #000000;
@secondaryColor: #FFFFFF;
@textColor: #000000;

我想通过页面操作这些。

1) 这是否意味着我需要加载 LESS 并通过包含 less.js 进行实时编译，或者是否有一种方法可以操纵、重新编译和重新加载 CSS？我认为将它们移动到 vars.less 文件可能是有意义的，但这并不能帮助我解决问题。

2) 通过在 HTML 文档的头部声明 LESS 变量以使其更易于访问，这是否更容易（并且可能）完成？

3) 我希望更改 user/session 具体。例如，如果 UserA 来到该站点并进行更改，我不希望 UserB 看到这些。在我看来，这似乎指向了在客户端声明 LESS 变量，但我一片空白，所以我想我只是寻求帮助。

我会想出一个 fiddle，但我不知道如何在 js 中实现 LESSfiddle。

Answer 1

您正在寻找的是一种修改 LESS 变量的动态方法。您可以使用 less.modifyvars().

当用户点击特定颜色并将颜色设置为变量时调用它。 LESS 更改变量的值并自动使用更改后的值再次呈现 CSS。