Retrieve or set LESS variable from JavaScript?

Question

While testing my web app, I'd like to be able to set the value of one of my LESS @variables using a simple dropdown. (To change the color scheme altogether).

I guess after setting the value, LESS has to reload/recompile the .less files with the new value?

Is there any simple way of accomplishing this? (I'm not running node.js)

The basic example would be something like:

styles.less
@base-color = `window.baseColor()`

What do you mean, you don't run node.js? Is your LESS-file compiled into CSS on the server-side? — yunzen
– yunzen, Commented Nov 28, 2011 at 15:36
No, I'm just including it like this: <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script> — dani
– dani, Commented Nov 28, 2011 at 20:18

bzx · Accepted Answer · 2011-11-30 15:54:30Z

6

I think you're doing it in a bit too complicated way ;)

Here's what I propose:

Set a class on your body tag:
```
<body class='theme_default'></body>
```

In your .less file define your themes:

body.theme_default { base_color: #fff; }
body.theme_gray    { base_color: #ccc; }
etc..

Using jQuery (or just plain JS) change the class of the body tag upon dropdown state change.

That's how I'd do it (and replace the dropdown with some nice widget ;) Cheers

answered Nov 30, 2011 at 15:54

bzx

1,36311 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dani Over a year ago

Ahh, that sounds much more reasonable :)

Collectives™ on Stack Overflow

Retrieve or set LESS variable from JavaScript?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related