SCSS多選擇器

Question

嗨我有這個代碼：

.navbar .nav-pills .active > a {  
  background-color: $NavBgHighlight;  
  color: $NavTxtColor;  
}    
.navbar .nav-pills .active > a:hover {  
  background-color: $NavBgHighlight;  
  color: $NavTxtColor;  
}

我想將兩個部分合並為一個部分，更像是：

 .navbar .nav-pills .active > a, a:hover {  
  background-color: $NavBgHighlight;  
  color: $NavTxtColor;  
}   

但它不會那樣工作:(我怎么能合並它們？（我想要的是：懸停和正常的a會起作用）

Answer 1

您可以使用SASS選擇器嵌套 ：

.navbar .nav-pills .active {
    > a, > a:hover {
        background-color: $NavBgHighlight;  
        color: $NavTxtColor;  
    }
}    

編譯為：

.navbar .nav-pills .active > a, .navbar .nav-pills .active > a:hover {
    ... 
}

Answer 2

.navbar{
        &.nav-pills{
           &.active {
              > a, > a:hover {
                background-color: $NavBgHighlight;  
                color: $NavTxtColor;  
              }
            } 
          }
        }