cancel
Showing results for 
Search instead for 
Did you mean: 

CSS LESS variable not overriding

CSS LESS variable not overriding

Although many of the variables I have updated in my <theme>/web/css/source/_extend.less file work correctly I have now noticed that I can't override one very specific variable.

 

I noticed that the active dots on the fotorama mobile version of the product gallery are still orange, and not black as per my defined color, and I dont understand why. I've checked the original gallery.less file and the dot color is defined as @active__color.

 

In my _extend.less file this @active__color is defined as black. I referred to the reference page here https://github.com/magento/magento2/blob/2.3/lib/web/css/source/lib/variables/_colors.less 

and see that the orange color is defined as 

@theme__color__secondary: @color-orange-red1;

and then
@active__color: @theme__color__secondary;

so I changed both @active__color and @theme__color__secondary to black, but it still comes up as orange.

 

Where am I going wrong?

3 REPLIES 3

Re: CSS LESS variable not overriding

If your query is not solved we can offer 30 minutes call with our experts to solve your problem. We would not charge anything for our consultation.

Re: CSS LESS variable not overriding

So kind of you.

 

But instead of offering 30 min call, if you would have provided solution in answer only then it would have helped so many developer like me.

Re: CSS LESS variable not overriding

Ok! One of the above issues led to a discussion of the intended behaviour, and it turns out that overriding LESS variables is fine. Your declarations will overwrite each-other in the same scope in CSS; The same is true for LESS. Like in CSS,overriding within a scope is an intended way to use LESS.