How to make css not repeat same class?-CodePudding

.class-action:hover, .class-action.activeOne {
  color: black;
  font-weight: bold;
}

.class-action.activeOne {  
  margin: 3px 0px; 
  border-bottom: 2px solid black;
}

is there a way to stack these css code? I dont want to repeat same class again. I want all four style for ".class-action.activeOne" and only above 2 style when ".class-action:hover"

other option is below, but it repeats the css

.class-action:hover {
  color: black;
  font-weight: bold;
}

.class-action.activeOne {
  color: black;
  font-weight: bold; 
  margin: 3px 0px; 
  border-bottom: 2px solid black;
}

CodePudding user response：

Simply nest your selectors:

.class-action {
    &:hover,
    &.activeOne {
        color: black;
        font-weight: bold;
    }

    &.activeOne {  
        margin: 3px 0px; 
        border-bottom: 2px solid black;
    }
}