All geek questions in one place

Get or set a LESS variable from JavaScript?

When testing my web application, I would like to set the value of one of my LESS @variables using a simple drop-down list. (To completely change the color scheme).

I think, after setting the value, LESS should reload / recompile without. files with a new value?

Is there an easy way to do this? (I do not run node.js)

A basic example might be the following:

styles.less @base-color = `window.baseColor()`
+4
source share
1 answer

I think that you are doing it too hard: wink

Here is what I suggest:

  • Set the class in the body tag:

     <body class='theme_default'></body>

  • In your .less file, indicate your topics:

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

  • Using jQuery (or just JS) changes the body tag class when the state of the drop-down list changes.

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

+6
source

Source: https://habr.com/ru/post/1383432/

More articles:


All Articles