override less variable property/value with inline variable in jsp/html

Question

I have a situation where I have to override the less variable property/value with inline variable written in jsp/html. I define few variable in main file (abc.less) as follows:

@bodyColor: rgb(88,90,91); // (#585a5b) grayish
@brandColor1: rgb(23,59,107); // (#173b6b) dark

and I write following ones in jsp/html for changing the color, I am using the same variables name as main file.

@bodyColor: rgb(255,0,0); // (#ff0000) redish
@brandColor1: rgb(204,204,204); // (#cccccc) grayish

but it is overriding the main file property, kindly let me know how it will works. Thanks in advance.

Answer 1

You can create a file with all the colors defined in it as colors.less

@bodyColor: rgb(255,0,0); // (#ff0000) redish
@brandColor1: rgb(204,204,204); // (#cccccc) grayish

then add the following statement at the top in all the other less files,

@import "colors.less";

This way there is not need to change the colors in all the files, instead you can just change it in the colors.less file and it will get updated in all the other places.

You can use the same method for defining and reusing styles, mixins and other variables.