css - 如何让css不重复同一个类？

Question

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

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

有没有办法堆叠这些CSS代码？我不想再重复同一个类。我想要“.class-action.activeOne”的所有四种样式，并且在“.class-action:hover”时只需要以上 2 种样式

其他选项如下，但它重复了 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;
}

Answer 1

简单地嵌套你的选择器:

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

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