將使用第二變換懸停

我有一個圖標字體（建於icomoon），我在y軸上顯示翻轉FontAwesome的輔助類.fa翻轉，垂直將使用第二變換懸停

.icon-reject-outline { 
    @extend .icon-approve; 
    @extend .fa-flip-vertical; 
}

我想成長吧40％懸停，但SASS擴展類的方式，只需選擇.fa-flip-vertical不起作用，我需要記住擴展我的.hover-grow類以包含每個翻轉的圖標，否則增長40％轉化將覆蓋翻轉變換，而不是添加：

.x-action-column-hover-grow .x-action-col-icon { 
    transition: scale .2s ease-in-out; 
    margin-left: 5px; 
    margin-right: 5px; 
    &:hover { 
     transform: scale(1.4); 
    } 
    &.fa-flip-vertical:hover,&.icon-reject-outline:hover{ // I'd ideally not need the second selector here 
     transform: scale(1.4) scaleY(-1) 
    } 
}

這感覺有點噁心的，所以我想知道是否有一種方法來標記延伸.fa-flip-vertical的類，以便懸停知道保持翻轉或以某種方式使懸停變換成爲疊加而不是替換非懸停變換。

我不認爲這是相關的答案，但是這是使用ExtJS的6.2

爲了完整，.fa-flip-vertical定義如下：

-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; 
    -webkit-transform: scale(1, -1); 
    -ms-transform: scale(1, -1); 
    transform: scale(1, -1);

來源

2017-09-28 Matt Allwood

你不能這樣做，在CSS：重寫的屬性被覆蓋並且以前的值丟失。

在薩斯，一個辦法做到這一點是使用一個mixin：

@mixin transform-and-flip($val) { 
    transform: $val scaleY(-1); 
} 

$make-the-logo-bigger: scale(1.4); 

.x-action-column-hover-grow .x-action-col-icon { 
    transition: scale .2s ease-in-out; 
    margin-left: 5px; 
    margin-right: 5px; 

    &:hover { 
    transform: $make-the-logo-bigger; 
    } 

    &.fa-flip-vertical:hover, 
    &.icon-reject-outline:hover { 
    @include transform-and-flip($make-the-logo-bigger); 
    } 
}

對於塊，我會用@content directive。如果我經常玩複雜的多背景或箱形陰影或線性梯度

來源

2017-09-28 12:31:33 FelipeAls

將使用第二變換懸停

回答

相關問題