node.js - 从用户设置动态设置 LESS 变量

Question

这确实是一件简单的事情。要么可能，要么不可能。

我在数据库中有用户设置，或者至少会有。这些设置将包含字体大小、颜色和不透明度等内容。我需要从成员对象中获取它们并进入 LESS 样式。

在继续之前，我应该让您知道我正在使用 Node.js + Sails.js + MongoDB。

我的成员对象看起来类似于(截断的数据):

{ 
    _id: ObjectId("52afc219c41e159808d41be5"),
    createdAt: ISODate("2013-12-17T03:16:41.947Z"),
    email: "someemail@provider.com",
    encryptedPassword: "$2a$10$TJ2vMgRpG1y/pYrHPWyDp.pd9u9lgHqNTOSV5fob2yckIFdQsxQea",
    firstName: "Firstname",
    lastName: "Lastname",
    updatedAt: ISODate("2013-12-27T22:40:34.057Z"),
    textSize: 14,
    textColor: "#333333",
    widgetOpacity: 0.7
}

在 LESS 文件中，我需要能够使用以下数据设置顶部的 @vars:

@textSize: member.textSize;
@textColor: member.textColor;
@widgetOpacity: member.widgetOpacity;

或者

@textSize: <%- member.textSize %>;
@textColor: <%- member.textColor %>;
@widgetOpacity: <%- member.widgetOpacity %>;

当然，所有这些都会引发错误。请指出我在这里未能做到的事情。谢谢。

Answer 1

我认为这取决于您何时读取用户对象并写入较少的文件。如果您在客户端编译 LESS 文件，请参阅 http://lesscss.org/#usage您可以选择实时操作变量，请参阅:Changing variable dynamically (at runtime) via LESS and CSS? .

在大多数情况下，您将 LESS 预编译为 CSS 并在浏览器中加载 CSS。我认为在这种情况下你有两个选择:

1. 在编写之前，根据用户设置编译你的CSS页面，示例 http://twitterbootstrap3buttons.w3masters.nl/
2. 编译和laod后使用javascript/jquery来操作你的css，请参阅:Modifying CSS on the fly using jquery