如何用SASS簡化這個CSS？

Question

我有這個CSS，我想盡可能地縮短使用sass。 我可以在任何這些項目上使用擴展/繼承或嵌套嗎？

謝謝！

.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

這應該工作，你可以使用這個格式化你的CSS到SASS：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，不頂嘴：

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