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按鈕狀態

回答

相關問題