lundi 22 février 2016

LESS preprocessor removes repeated properties

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




Aucun commentaire:

Enregistrer un commentaire