Question

我正在使用指南针来生成我的图标和悬停状态。活动状态与悬停状态相同，我希望我的精灵地图不会臃肿并带有重复的图标。有没有办法让它将一个活动类添加到与悬停状态相同的坐标？

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

Answer 2

你有read the docs吗？选择器控制部分包括：

@import 'sprites/*.png';

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

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

2 个答案: