如何避免重复 css 而不使用 !important？

Question

好的，事情是这样的，我有一个 Bootstrap 导航栏，我想给它一些风格，假设这是你必须关注的代码部分

<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>

如果我这样做

  .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;
    }
  }

background 和 color 部分不起作用，我必须在这两种情况下都加上 !important，我遇到的问题是，一旦你专注于其中任何一个链接，.active 被调用，所以我必须这样做

  //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;
    }
  }

正如你们看到的那样，该代码是完全相同的代码，但不同之处在于 .active 我如何才能将该代码编译为该部分的一个代码，而不使用 !important

Answer 1

为 .hover-nieve 选择器增加更多的特异性。例如body .hover-nieve { ... /* Rules here */ } 并且您不再需要 !important。

示例：

body .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;
  }
}

如何避免重复 css 而不使用 !important？

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

css

sass

twitter-bootstrap