Changing variable dynamically (at runtime) via LESS and CSS?

Question

@myThemeBackground = #ffffd;  

div#box1 { background: @myThemeBackground; }  

I\'m using LESS in order to use variables for my css. It works fine, b

Answer 1

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.

Answer 2

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

Answer 3

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

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