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();
    }
}