How can I avoid repeating the css and not using !important?

Ok here is the thing, I have a Bootstrap navbar which I'm trying to give some style, lets say this is the portion of code you must focus on

<div class="collapse navbar-collapse">
   <ul class="nav navbar-nav">
     <li class="active"><a class="hover-nieve" href="#/lines">Sports <span class="sr-only">(current)</span></a></li>
     <li><a class="hover-nieve" href="javascript:void(0);">Poker</a></li>
     <li><a class="hover-nieve" href="javascript:void(0);">Casino</a></li>
     <li><a class="hover-nieve" href="javascript:void(0);">Horses</a></li>
     <li><a class="hover-nieve" href="javascript:void(0);">Info</a></li>
   </ul>
</div>

if I do this

  .hover-nieve {
    background: get-color(nieve);
    color: get-color(night);
    transition: all .4s ease;

    &:hover,
    &:focus {
      background: get-color(nieve);
      box-shadow: inset 0 -4px 0 0 lighten(get-color(rose), 5%);
      color: get-color(rose);
      margin: 0;
    }
  }

the background and color part doesn't work, I have to put !important in both cases, the issue I have is that once you do focus on any of those links, the .active is called, so I had to do this

  //when .active
  .active .hover-nieve {
    background: get-color(nieve);
    color: get-color(night);
    transition: all .4s ease;

    &:hover,
    &:focus {
      background: get-color(nieve);
      box-shadow: inset 0 -4px 0 0 lighten(get-color(rose), 5%);
      color: get-color(rose);
      margin: 0;
    }
  }

  // normal behavior
  .hover-nieve {
    background: get-color(nieve);
    color: get-color(night);
    transition: all .4s ease;

    &:hover,
    &:focus {
      background: get-color(nieve);
      box-shadow: inset 0 -4px 0 0 lighten(get-color(rose), 5%);
      color: get-color(rose);
      margin: 0;
    }
  }

and as you see guys, that code is exactly the same code but with the difference of the .active how can I compile that code into one code only for that part, and with out using !important