通过用户设置动态设置LESS变量 [英] Dynamically set LESS variables from user settings
问题描述
这真的很容易解释.可能或不可能.
This is a simple matter to explain really. It's either possible or it's not.
我在数据库中有用户设置，或者至少有.这些设置将包含诸如字体大小，颜色和不透明度之类的内容.我需要从成员对象中获取它们，并转换为LESS样式.
I have user settings in the DB, or will have at least. These settings will contain things like font sizes, colors and opacity. I need to get them from the member object and into the LESS styles.
在继续之前，我应该让您知道我正在使用Node.js + Sails.js + MongoDB.
Before I go on I should let you know that I'm using Node.js + Sails.js + MongoDB.
我的成员对象看起来类似于(截断的数据):
My member object will look similar to ( truncated data ):
{
_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:
In the LESS file I need to be able to set the @vars at the top with this data:
@textSize: member.textSize;
@textColor: member.textColor;
@widgetOpacity: member.widgetOpacity;
或
@textSize: <%- member.textSize %>;
@textColor: <%- member.textColor %>;
@widgetOpacity: <%- member.widgetOpacity %>;
当然，所有这些都会引发错误.请指出我在这里没有做的事情.谢谢.
Of course all of this throws errors. Please point out what I'm failing to do here. Thanks.
推荐答案
我认为这取决于您何时读取用户对象并写入较少的文件. 如果您在客户端编译LESS文件，请参阅 http://lesscss.org/#usage 实时操作var的选项，请参见:动态更改变量(在运行时)通过LESS和CSS?.
I think this depend on when you read the user object and write your less files. If you compile your LESS files client side, see http://lesscss.org/#usage you will have option to manipulate vars on real time, see: Changing variable dynamically (at runtime) via LESS and CSS?.
在大多数情况下，您可以将LESS预编译为CSS，然后将CSS加载到浏览器中.我认为您在这种情况下有2种选择:
In most cases you pre-compile you LESS to CSS and load the CSS in your browser. I think you have 2 option in this case:
- 根据用户设置编译CSS，然后再编写 页面，例如 http://twitterbootstrap3buttons.w3masters.nl/
- 在编译和编译后，使用javascript/jquery来操作您的CSS， 请参阅:使用jquery即时修改CSS
- compile your css, based on user setting, before you write the page, example http://twitterbootstrap3buttons.w3masters.nl/
- use javascript / jquery to manipulate your css after compiled and laod, see: Modifying CSS on the fly using jquery
这篇关于通过用户设置动态设置LESS变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
