Less preprocessor removes repeated properties

Question

I was unsetting a particular color by using initial, but IE doesnt support initial so I had to provide a specific color for it. So below was the format I used.

Initially:

a.link-ele {
  color: initial;
  &:hover {
    text-decoration: none;    
    color: initial;
  }
}

In order to support IE:

a.link-ele {
  color: black;
  color: initial;
  &:hover {
    text-decoration: none;  
    color: black;  
    color: initial;
  }
}

Here black will be set in IE and initial in browsers which support it since initial comes later.

PROBLEM: Less, in-order to optimize the CSS uses only color:initial; since it thinks its quite obvious the second one will be used by browser.

Alright so for that I do the below:

a.link-ele {
      color: initial;
      &:hover {
        text-decoration: none;    
        color: initial;
      }
    }
.link-ele {
  color: black;
  &:hover {
    color: black;
  }
}

I changed the specificity thinking Less would not remove it but it looks like Less still uses the higher specificity value.

Question: How do I make Less allow both values?

Note: I know to make it work using different class-names or other ways, I just want to know is there a flag or something I can set which makes Less to allow both colors.

I have already tested the above concept in IE and other browsers and it works fine

I use ember-cli and emberjs framework

Less compiler by default would not remove repeated properties. You can check the default compiled output [here](http://lesscss.org/less-preview/#%7B%22less%22%3A%22a.link-ele%20%7B%5Cn%20%20color%3A%20black%3B%5Cn%20%20color%3A%20initial%3B%5Cn%20%20%26%3Ahover%20%7B%5Cn%20%20%20%20text-decoration%3A%20none%3B%20%20%5Cn%20%20%20%20color%3A%20black%3B%20%20%5Cn%20%20%20%20color%3A%20initial%3B%5Cn%20%20%7D%5Cn%7D%22%7D). Maybe you have some compression/minify options enabled while compiling (or) somewhere else. — Harry, Feb 23 '16 at 04:01
Thank you, you are right. It was minifyCss. Can you add it as an answer so that i can accept it? — wallop, Feb 23 '16 at 18:35
its about helping others too, its much more easier for somebody to find it as an answer than a comment : ) — wallop, Feb 23 '16 at 20:41
Fair enough @wallop. Give me a couple of minutes and I will add it in. — Harry, Feb 23 '16 at 20:44

score 1 · Accepted Answer · answered Feb 23 '16 at 20:51

As I had mentioned in my comment, the Less compiler does not remove any properties from the compiled output even if it is redundant information. The compiler would still give the below output with both the color: black and the color: initial settings. A demo is available here.

a.link-ele {
  color: black;
  color: initial;
}
a.link-ele:hover {
  text-decoration: none;
  color: black;
  color: initial;
}

The removal of redundant properties should therefore be getting done by some CSS compressor or minifier because they are generally the ones which strip out all redundant and unwanted information. In you case it seems to by minifyCSS.

Less preprocessor removes repeated properties

1 Answers1