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

但它不是那样工作的 :( 我怎样才能合并它们？(我希望 :hover 和普通的 a 表现相同)

Answer 1

您可以使用 SASS selector nesting :

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

编译为:

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