sass指南针魔法精灵激活状态

sass指南针魔法精灵激活状态,sass,compass-sass,Sass,Compass Sass,我正在使用指南针生成我的图标和它们的悬停状态。活动状态与悬停状态相同,我希望我的精灵地图不会因为重复图标而膨胀。有没有办法让它添加一个活动类到与悬停状态相同的坐标 @import 'sprites/*.png'; @include all-sprites-sprites; 生成: .sprites-left { background-position: 0 -16px; } .sprites-left:hover, .sprites-left

我正在使用指南针生成我的图标和它们的悬停状态。活动状态与悬停状态相同,我希望我的精灵地图不会因为重复图标而膨胀。有没有办法让它添加一个活动类到与悬停状态相同的坐标

    @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;
    }
是吗?选择器控制部分包括以下内容:

@import 'sprites/*.png';

.sprites-left {
  &:hover, &.active { @include sprites-sprite(name_for_hover) }
  ... etc
}

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

@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; }

重新阅读你的评论。我想你没有注意到我正在使用它根据文件名生成所有精灵的名称。左边的精灵就是一个例子。要用每一个精灵的名字来写,那就没用了。