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。在这种情况下，我认为你有两个选择：

在编写之前根据用户设置编译css 页面，示例http://twitterbootstrap3buttons.w3masters.nl/
使用javascript / jquery在编译和完成后操作你的css，见：Modifying CSS on the fly using jquery

从用户设置动态设置LESS变量

1 个答案: