Changing variable dynamically (at runtime) via LES

问题:

@myThemeBackground = #ddd;  

div#box1 { background: @myThemeBackground; }  

I'm using LESS in order to use variables for my css. It works fine, but I'm wondering if there's a way for me to change the "myThemeBackground" dynamically at runtime via javascript or something.

So say if the user chooses a custom color for the background I'd like the entire skin to change.

Note: this is for dynamically theming/skinning an application where the user chooses the color for the background for example and then the whole app changes (without a page refresh)

回答1:

You can modify Less variables on the fly using the modifyVars method:

less.modifyVars({ myThemeBackground : '#000' });

回答2:

I usually grab the CSS generated by LESS and include that in a file to optimize the web page loading speed. In fact, I use LESS.app for Mac to generate my CSS.

To my knowledge, part of the solution would involve including less.js file to your page. This in turn means that generating the style of the page would be slow and the caching might cause you some trouble too...

I would humbly suggest generating multiple CSS stylesheets with LESS and include these files when needed with JavaScript.

回答3:

The only solution I can think of is to change the text you render with less.js, with:

less.refreshStyles()

Change the text in the file or in the less snippet of styling.

Read more about it here: Load less.js rules dynamically