제 2의 사용 내가 y 축에 대칭 이동 표시 할 것을 내가 (icomoon에 내장) 아이콘 글꼴이 호버

Question

에 변환 추가 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) 
    } 
} 

약간의 느낌이 들기 때문에 & 호버 (hover)가 호버링을 유지하는 것을 알고 있거나 비 호버 변형을 대체하는 대신에 & 호버 변형을 부가 적으로 만들도록 .fa 플립 수직을 확장하는 클래스를 플래그하는 방법이 있는지 궁금해하고있었습니다.

내가 대답에 관련된 생각하지 않습니다, 그러나 이것은 다음과 같이 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); 

Answer 1

당신이 할 수있는 CSS에서 : 재정의 된 속성이 무시되고 이전 값이 손실됩니다. 말대꾸에서

, 그것은 믹스 인을 사용하는 것입니다 할 수있는 방법 :

@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을 사용하십시오. 복잡한 배경이나 상자 그림자 또는 선형 그라디언트로 자주 연주하려면