Is there way to let javascript to pass value to less?

[maplewf]

Hi,

I'm very new for LESS, I think it's good way to organize the style sheets, but I have a doubt about how to make js interact with less. Here is my story: I want to provide user the ability to switch theme in my web page, when user choose the theme with detailed settings through UI, js will get all style data for this theme, next is to use these style settings to change CSS, but if I integrate with LESS, how can i pass these settings to LESS? I roughly go through the guide in http://lesscss.org/features/, but not found the proper way to do it. did I miss something, or just LESS don't support it? anyone can give me a hint?

By the way, all actions I described above just happened on client-side, no server interaction.

thanks in advance.

best regards.

[rjgotten]

You can pass an additional set of variables to the LESS compiler and have it recompile the stylesheets with the new values:

http://lesscss.org/usage/#using-less-in-the-browser-modify-variables

[stramel]

Could push for the use of CSS Variables that could be set using Javascript. This would allow you to serve up CSS and dynamically change the theme.

#2715

[rjgotten]

Could push for the use of CSS Variables that could be set using Javascript.

While more performant to do it native, LESS can already take an externally populated set of variables and recompile when their values change.

Again:

http://lesscss.org/usage/#using-less-in-the-browser-modify-variables

[stramel]

@rjgotten I agree, LESS by itself at this given time can handle it. However, it does require compiling at runtime for that solution, so I brought up an alternative way that did not.

[matthew-dean]

@stramel I think you're focusing on the wrong place. If you've used CSS variables (or "custom properties" as they are actually defined) in your Less style sheet, you can use JavaScript to just set new values for those custom properties directly by injecting new styles into your document that sets them. You don't have to manipulate the Less-generated styles at all to do so. The browser will combine your new style values with the existing generated styles using the normal CSS cascade and re-paint the page. Nothing new should be needed on the Less side.

[stramel]

@matthew-dean Correct, you could use javascript to inject a CSS stylesheet with updated CSS variables/properties or use javascript to directly set the CSS variables/properties.

@rjgotten had proposed serving LESS stylesheets and compiling them in the user's browser at runtime or recompiling them using less.modifyVars.

I was simply posting an alternative for a different perspective.

[seven-phases-max]

Closing as answered.