css - How to set :hover color to normal color with Less? -

i have component jl-btn can have different color (css property here) depending on other classes may affected by. classes can used <a> element , i'd like, in 1 less statement, :hover , :focus color must same normal state.

.jl-btn {   color: blue;    &.jl-btn-important {     color: red;   }    &:hover, &:focus {     color: ???,     text-decoration: none   } } 

i tried set color inherit or initial sets black. i'd :hover , :focus color red if there jl-btn-important class, blue if not.

any idea ?

[edit] bad, forgot tell i'm using bootstrap's scaffolding defines style a:hover, a:focus

option 1: (if no other setting over-riding default behavior)

ideally not adding color setting under :hover , :focus selectors should work. below snippet proof that. if not working there other selector overriding it.

.jl-btn {    color: blue;  }  .jl-btn.jl-btn-important {    color: red;  }  .jl-btn:hover,  .jl-btn:focus {    text-decoration: none;  }

<a class='jl-btn' href='#'>hello</a>  <a class='jl-btn jl-btn-important' href='#'>hello</a>

---

option 2: (if other selector over-riding default behavior bootstrap or other library)

in case, modify less code below. apply same colors default, :hover , :focus selectors without having repeat color under each selector.

.jl-btn {   &, &:hover, &:focus{     color: blue;   }   &.jl-btn-important {     &, &:hover, &:focus {       color: red;     }   }   &:hover, &:focus {     text-decoration: none   } } 

the below snippet based on compiled css output of above less code.

.jl-btn,  .jl-btn:hover,  .jl-btn:focus {    color: blue;  }  .jl-btn.jl-btn-important,  .jl-btn.jl-btn-important:hover,  .jl-btn.jl-btn-important:focus {    color: red;  }  .jl-btn:hover,  .jl-btn:focus {    text-decoration: none;  }

<a class='jl-btn' href='#'>hello</a>  <a class='jl-btn jl-btn-important' href='#'>hello</a>

---

option 3: (if have multiple modifiers , want avoid writing manually)

if feel writing selectors multiple times unnecessary repetition write mixin (like in below code block), make set color required selectors.

.jl-btn {   .set-anchor-colors(blue); /* mixin set default, hover , focus color */   &.jl-btn-important {     .set-anchor-colors(red); /* mixin set default, hover , focus color */   }   &:hover, &:focus {     text-decoration: none;   } }  .set-anchor-colors(@color){   &, &:hover, &:focus{     color: @color;   } }