SCSS 多重选择器答案

【问题标题】：SCSS multiple selectorsSCSS 多重选择器
【发布时间】：2014-07-28 18:31:57
【问题描述】：

你好，我有这个代码：

.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 行为相同）

【问题讨论】：

标签： css sass css-selectors

【解决方案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 {
    ... 
}

【讨论】：

【解决方案2】：

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

【讨论】：