3

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.

naveen kumar
  • 43
  • 6
  • Why aren't you compiling the Less stylesheet into regular CSS? – Blender May 05 '13 at 07:34
  • @Blender, I am using brandColor1 variable in 20 styles in main file and want to replace their color at one go. If I do it via regular css I have to copy each and every styles and paste into my jsp/html. In jsp/html file I have to change the color of each style. – naveen kumar May 05 '13 at 11:44

1 Answers1

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.

Livingston Samuel
  • 2,422
  • 2
  • 20
  • 35