CODEWITHSUNDEEP
csssass
greg b
greg b

Reputation: 27

Sass selector with ampersands, plus with OR on another class

I have a list of buttons that look like this:

<button class="PatientImage-button"> <img src="1"> </button>
<button class="PatientImage-button"> <img src="2"> </button>
<button class="PatientImage-button"> <img src="3"> </button>
<button class="PatientImage-button active"> <img src="4"> </button>
<button class="PatientImage-button"> <img src="5"> </button>

And the highlighting is done through a css style border-color: #000000.

Clicking the button calls an event which updates the button's class to include active. Also hovering and focusing on the button should do that too.

I'm trying to get the sass selectors correct so that I don't have to write border-color: #000000 twice in the file. Here's what works: 

.PatientImage {
  &-button {
    padding: 2px;
    &:hover, &:focus {
      border-color: #000000; 
    }
  }
}
.active {
  border-color: #000000; 
}

Is there a way with Sass selectors I can do something like this? (doesn't work)

.PatientImage {
  &-button {
    padding: 2px;
    &:hover, &:focus, .active {
      border-color: #000000; 
    }
  }
}

Upvotes: 0

Views: 80

Answers (1)

Jitesh Garude
Jitesh Garude

Reputation: 26

Try below code:

.PatientImage-button{
  padding: 2px;
  &:hover, &:focus,&.active{
    border-color: #000000; 
  }
}

Upvotes: 1

Related Questions