Css 在悬停时添加第二个变换

我有一个图标字体（内置icomoon），我使用FontAwesome的helper类在y轴上翻转显示。fa flip vertical

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

我想在hover上使其增长40%，但是SASS扩展类的方式，仅选择on.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)
    }
}

这感觉有点恶心，所以我想知道是否有一种方法可以将类标记为extensing.fa flip vertical，以便&hover知道如何保持翻转，或者以某种方式使&hover变换是相加的，而不是替换非hover变换

我认为这与答案无关，但这是使用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);

---

在CSS中不能这样做：覆盖的属性被覆盖，而先前的值丢失

在Sass中，一种方法是使用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);
  }
}

---

对于块，我将使用。如果我想经常使用复杂的多背景、方框阴影或线性渐变，那么在CSS中就不能这样做：覆盖的属性被覆盖，之前的值丢失

在Sass中，一种方法是使用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);
  }
}

对于块，我将使用。如果我想经常玩复杂的多重背景或框阴影或线性渐变