このCSSをSASSで簡略化するにはどうすればよいですか？

Question

私はこのCSSを、できるだけ短くしたいと思っています。 これらの項目のいずれに対しても拡張/継承またはネスティングを使用できますか？

ありがとうございます！

.navbar-inverse .navbar-nav>li>a { 
    color: #fff; 
} 

.navbar-inverse .navbar-nav>.active>a, 
.navbar-inverse .navbar-nav>.open>a { 
    background-color: $activehoverblue; 
} 

.navbar-inverse .navbar-nav>.active>a, 
.navbar-inverse .navbar-nav>.active>a:focus, 
.navbar-inverse .navbar-nav>.active>a:hover { 
    background-color: $activehoverblue; 
} 

.navbar-inverse .navbar-nav>.open>a, 
.navbar-inverse .navbar-nav>.open>a:focus { 
    background-color: $activehoverblue; 
} 

.navbar-inverse .navbar-nav>.open>a:hover, 
.navbar-inverse .navbar-nav>li>a:hover { 
    background-color: $hoverblue; 
} 

Answer 1

これは、動作するはずですあなたはこの使用SASSにあなたのCSSを再フォーマットすることができますhttp://css2sass.herokuapp.com/

.navbar-inverse .navbar-nav > 
    li > a 
    color: #fff 
    .active > a, .open > a 
    background-color: $activehoverblue 
    .active > a 
    background-color: $activehoverblue 
    &:focus, &:hover 
     background-color: $activehoverblue 
    .open > a 
    background-color: $activehoverblue 
    &:focus 
     background-color: $activehoverblue 
    &:hover 
     background-color: $hoverblue 
    li > a:hover 
    background-color: $hoverblue 

またはこの：http://beautifytools.com/css-to-scss-converter.php

.navbar-inverse { 
    .navbar-nav { 
     >li { 
      >a { 
       color: #fff; 
       &:hover { 
        background-color: $hoverblue; 
       } 
      } 
     } 
     >.active { 
      >a { 
       background-color: $activehoverblue; 
       background-color: $activehoverblue; 
       &:focus { 
        background-color: $activehoverblue; 
       } 
       &:hover { 
        background-color: $activehoverblue; 
       } 
      } 
     } 
     >.open { 
      >a { 
       background-color: $activehoverblue; 
       background-color: $activehoverblue; 
       &:focus { 
        background-color: $activehoverblue; 
       } 
       &:hover { 
        background-color: $hoverblue; 
       } 
      } 
     } 
    } 
} 

Answer 2

はこれを試してみてください、カントーはSCSSではなく、SASS：

.navbar-inverse .navbar-nav { 
    li a { 
     color: #fff; 

     &:hover { 
      background-color: $hoverblue; 
     } 
    } 

    &.active a { 
     background-color: $activehoverblue; 

     &:focus, &:hover { 
      background-color: $activehoverblue; 
     } 
    } 

    &.open a { 
     background-color: $activehoverblue; 

     &:focus { 
      background-color: $activehoverblue; 
     } 

     &:hover { 
      background-color: $hoverblue; 
     } 
    } 
} 

または、これを試してみてください：

.navbar-inverse .navbar-nav { 
    li a { 
     color: #fff; 

     &:hover { 
      background-color: $hoverblue; 
     } 
    } 

    &.active a { 
     background-color: $activehoverblue; 

     &:focus, &:hover { 
      **background-color: currentColor;** 
     } 
    } 

    &.open a { 
     background-color: $activehoverblue; 

     &:focus { 
      background-color: currentColor; 
     } 

     &:hover { 
      background-color: $hoverblue; 
     } 
    } 
}