这确实是一件简单的事情。要么可能,要么不可能。
我在数据库中有用户设置,或者至少会有。这些设置将包含字体大小、颜色和不透明度等内容。我需要从成员对象中获取它们并进入 LESS 样式。
在继续之前,我应该让您知道我正在使用 Node.js + Sails.js + MongoDB。
我的成员对象看起来类似于(截断的数据):
{
_id: ObjectId("52afc219c41e159808d41be5"),
createdAt: ISODate("2013-12-17T03:16:41.947Z"),
email: "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0675696b63636b676f6a46767469706f6263742865696b" rel="noreferrer noopener nofollow">[email protected]</a>",
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 %>;
当然,所有这些都会引发错误。请指出我在这里未能做到的事情。谢谢。
最佳答案
我认为这取决于您何时读取用户对象并写入较少的文件。 如果您在客户端编译 LESS 文件,请参阅 http://lesscss.org/#usage您可以选择实时操作变量,请参阅:Changing variable dynamically (at runtime) via LESS and CSS? .
在大多数情况下,您将 LESS 预编译为 CSS 并在浏览器中加载 CSS。我认为在这种情况下你有两个选择:
- 在编写之前,根据用户设置编译你的CSS 页面,示例 http://twitterbootstrap3buttons.w3masters.nl/
- 编译和laod后使用javascript/jquery来操作你的css, 请参阅:Modifying CSS on the fly using jquery
关于node.js - 从用户设置动态设置 LESS 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20808935/