CODEWITHSUNDEEP
csssasscss-selectors
kfir124
kfir124

Reputation: 1306

SCSS multiple selectors

Hi i have this code: 

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

I wanted to merge both of the sections into one section, something more like: 

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

But it doesnt work that way :( how can i merge both of them? ( I want that the :hover and the normal a will act the same)

Upvotes: 12

Views: 22471

Answers (2)

jsalonen
jsalonen

Reputation: 30531

You can use SASS selector nesting:

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

Which compiles to:

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

Upvotes: 19

Amir akbari
Amir akbari

Reputation: 62

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

Upvotes: 4

Related Questions