Sass Compass 魔法 Sprite 激活状态

Question

我正在使用 compass 来生成我的图标及其悬停状态。事件状态与悬停状态相同，我想防止我的 sprite 贴图膨胀 有重复的图标。有没有办法让它在悬停状态的坐标上添加一个active类？

    @import 'sprites/*.png';
    @include all-sprites-sprites;

生成:

    .sprites-left {
      background-position: 0 -16px;
    }
    .sprites-left:hover, .sprites-left.left_hover, .sprites-left.left-hover {
      background-position: -18px -16px;
    }

我要补充

    .sprites-left.active  {
      background-position: -18px -16px;
    }

Answer 1

这是我所能想到的最接近的解决方案。

@import 'sprites/*.png'; // sprites to include
@include all-sprites-sprites; // creates all sprites

// Manually extend each to add active states.
.sprites-engaged.active{ @extend .sprites-engaged:hover; }
.sprites-married.active{ @extend .sprites-married:hover; }