CSS DRY按钮状态

Question

有没有办法做到这一点，只是重复相同的代码？

.button-hover {
  color:                           $button-hover-font-color;
  background-color:                $button-hover-color;
  &:hover, &:focus, &:active, &:visited {
    color:                           $button-hover-font-color;
    background-color:                $button-hover-color;
  }
}

Answer 1

是的，尝试使用简单的CSS语法：

.button-hover, .button-hover:hover, .button-hover:focus, .button-hover:active, .button-hover:visited {
    color:            $button-hover-font-color;
    background-color: $button-hover-color;
}

或者使用mixin :(我只知道LESS语法，但我猜它与您使用的任何预处理器类似）

.button-hover {
    color:            @button-hover-font-color;
    background-color: @button-hover-color;

    &:hover, &:focus, &:active, &:visited {
        .button-hover();
    }
}