Question

我有一个图标字体（内置在icomoon中），我使用FontAwesome的辅助类在y轴上显示.fa-flip-vertical

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

我希望在悬停时增长40％，但是SASS扩展课程的方式，只需选择.fa-flip-vertical并不起作用，我需要记住扩展我的.hover-将类包含在内以包含每个被翻转的图标，否则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以便＆amp; hover知道保持它翻转或以某种方式使＆amp; 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);

Answer 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);
  }
}

对于块，我使用 @content directive 。如果我经常使用复杂的多背景或箱阴影或线性渐变

在悬停时添加第二个变换

1 个答案: