Menu
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()`
822
LESS allows variables to be defined with an @ symbol. The Variable assignment is done with a colon(:).
Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official documentation for Less, the language and Less.js, the JavaScript tool that converts your Less styles to CSS styles. Because Less looks just like CSS, learning it is a breeze.
Storing a value in a variable is called variable initialization. You can do variable initialization at the time of variable creation or at a later point in time when you need that variable. For instance, you might create a variable named money and assign the value 2000.50 to it later.
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
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
