0

有没有办法做到这一点,因为它只是重复相同的代码?

.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;
  }
}
4

1 回答 1

0

是的,尝试简单的 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();
    }
}
于 2013-07-17T12:51:30.850 回答