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

标签 node.js less sails.js

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

我在数据库中有用户设置,或者至少会有。这些设置将包含字体大小、颜色和不透明度等内容。我需要从成员对象中获取它们并进入 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。我认为在这种情况下你有两个选择:

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

关于node.js - 从用户设置动态设置 LESS 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20808935/

相关文章:

javascript - 主干 .save() 上的 404 错误

node.js - 如何使用使用角度2发布的nodejs保存包含图像的表单数据

css - 使用@variable 来@import 另一个LESS 文件

html - 用于 radio 和标签的 React 和 css

CSS 预处理器,可以在@media 查询中定义变量

javascript - Sails.js 使用路由过滤记录

javascript - SailsJS - Angular2 - 资源丰富的 Pub/Sub

node.js - 使用 Gmail API Node.js 客户端发送大附件 (> 5 MB)

node.js - 使用 $group 时是否可以列出不存在的组?

node.js - sails js 数据关系