CSS DRY按钮状态

有没有办法做到这一点，因为它只是重复相同的代码？CSS DRY按钮状态

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

来源

2013-07-17 otissv

我相信你可以删除'＆：hover，＆：focus，＆：active，＆：visited'部分。这些颜色是否适用于这些州，以及只要班上有这些元素？ – jbabey

像@ jbabey说的使用级联！ – raam86

卡萨德没有工作，因为一旦你悬停或按下按钮转到它的默认状态。 – otissv

是啊，尝试纯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; 
}

或者使用一个混合：（我只知道LESS语法，但我想这是类似的任何预处理您正在使用）

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

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

来源

2013-07-17 12:51:30 feeela

谢谢feeela。选项1工作 – otissv

CSS DRY按钮状态

回答

相关问题