CODEWITHSUNDEEP
javascriptcssless
FredFury
FredFury

Reputation: 2501

How do I change a Less CSS variable with Javascript

I have progress bar similar to THIS that I want to change the colour of. For example when the value is less than 50% I want it to turn from green to yellow.

I'm new to Less. I've read that there are methods of updating the Less CSS. So if I had a @circle-color variable which I want to change later in my javascript; I should modify the var and then update the Less.

less.modifyVars({
    '@circle-color': '#FF4747'
});
less.refresh();

I've tried this so far without avail here. Is there a simple way of doing this? Am I missing something basic? This is one of those I feel might just have been answered before, but let's try anyway.

Upvotes: 0

Views: 4895

Answers (2)

user12096961
user12096961

Reputation:

It is possible to achive this with using less plugin function in styling instead of less variable (see also short 2 step version without less plugin). All you need is write one short less plugin (which is easy like write getter and setter) to re/store variable. Example of storing plugin is also in less documentation -> http://lesscss.org/features/#plugin-atrules-feature-plugin-scope just look for 'store'. I will introduce all needed steps to change color with less plugin function:

1. Create Less plugin: Create mylessplugin.js next to your less file. It will contain only get and set function in install function:

module.exports = function() {
    let COLORPLUGIN = {
        install: (less, pluginManager, functions) => {
            let storedColor = '#FFFFFF';

            functions.add('setcolorfn', (themeColor) => {
                storedColor = themeColor ? themeColor : '#FFFFFF';
            });

            functions.add('getcolorfn', () => {
                return storedColor;
            });
        }
    };
    return COLORPLUGIN;
};

2. Import your plugin to less file. With @plugin less will recognize your .js file as less plugin. What is done in less file? Maybe looks complicated, but is pretty easy. We can set our own property to body element which will store color we want to set later with javascript. I have named it --data-active-color and assigned it value '#FFFFFF'. Next row will call set function from our less plugin to store value in plugin using var() @setActiveColorFn: setcolorfn(~"var(--data-active-color)"). So our plugin now know that color is set to '#FFFFFF'. That's all for body element. Then we will create simple mixin which will set property color with get function from our less plugin. See .active-color. Or you can use mixin which set property you passed in brackets. The last thing to do in our less file is to extend class .con-active-color with our mixin. If you will place this class to elements (.container { .con-active-color;}) which you want to modify, it will be automatically changed with your stored color: 

@plugin "plugin/path/mylessplugin";

.con-active-color {
  &:extend(.active-color);
}

body {
  --data-active-color: '#FFFFFF';
  @setActiveColorFn: setcolorfn(~"var(--data-active-color)");
}

.active-color-background {
  background-color: getcolorfn();
}

.active-color {
  color: getcolorfn();
}

.active-param (@param) {
  @{param}: getcolorfn();
}

3. Change color with js. The last step is also very simple. Create color picker for example with element input type='color' onchange='changeColor()', and in changeColor function just modify --data-active-color property of your body element as you want. All changes of this property will our less file store in our less plugin, which will automatically return stored value in classes which use our mixin. So you can easily store your color f.e. in localStorage and set it to body element. That is all:

document.body.style.setProperty("--data-active-color", myNewColor);

Or you can also skip using less plugin and use body parameter directly. So all you need is:

1. Create less file where you can set default value for our storing parameter in body and create mixin:

@my-color: '#FFFFFF';

body {
    --data-color: @my-color;
}

.color-mixin (@property) {
    @{property}: ~"var(--data-color)";
}

2. Change color with js. (same like step 3 in previous version). Create color picker for example with element input type='color' onchange='changeColor()', and in changeColor function just modify --data-color property of your body element as you want. Then simply use mixin in element you want to modify (f.e. .color-mixin(background-color);). That's all:

document.body.style.setProperty("--data-color", myNewColor);

Upvotes: 2

Marco Hengstenberg
Marco Hengstenberg

Reputation: 864

I don't know if this exactly what you are looking for but you could use your variable like this:

.selector {
  color: @variable;

  &.50percentclass {
    color: @variable + #012345; /* any hex-value and subtraction is also possible */
  }

  &.100percentclass {
    color: @variable + #whatever;
  }
}

Or you could simply change the color value that way, like so:

.selector {
  color: @variable;

  &.50percentclass {
    color: yellow;
  }

  &:100percentclass {
    color: green;
  }
}

The issue I see doing this is you have to rely on Javascript for adding those classes whenever a certain threshold is met with the progress bar.

Here is a wonderful article on CSS only progress-bars: https://css-tricks.com/css3-progress-bars/

Upvotes: 1

Related Questions