Can’t change LESS variable color

I have a file with SVG icons and a mixin for its usage and in … Read more Can’t change LESS variable color

I have a file with SVG icons and a mixin for its usage and in some cases want to change the color of SVG but it doesn’t work..

Here’s how my svg file looks:

@myIcon: "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon stroke='@{stroke-color}' fill='none' points='0,20 100,0 100,80 0,100'/%3E%3C/svg%3E";
...

@stroke-color: @black; //use it inside "%3Csvg ..."

.icon-svg(@svg) {
  content: '';
  display: inline-block;
  position: relative;
  height: 1em;
  width: 1em;
  background: url("data:image/svg+xml,@{svg}");
}

than in general file I use it like this:

.my-icon:before {
    .icon-svg(@myIcon);
  }

And simply put the div with this class everywhere I want to use this icon, but the problem is that I need to change its color when it’s inside the dropdown, but it doesn’t work.

I tried to simply override this variable, create another mixin and call it inside the dropdown class, like this:

//in svg file
.change(@color) {
  @stroke-color: @color;
}

//inside dropdown styles
.dropdown {
  @stroke-color: red;
  //OR
  .change(red);
}

But still nothing.. So, my question is how can I change the color?

Would be really grateful fo any help!

Source: CSS – Stack Overflow


Categories: NewsTags: , ,

Tags: , ,


Leave a Reply

Your email address will not be published. Required fields are marked *