2

アイコンとそのホバー状態を生成するためにコンパスを使用しています。アクティブ状態はホバー状態と同じで、スプライト マップが重複したアイコンで肥大化しないようにしたいと考えています。ホバー状態と同じ座標にアクティブなクラスを追加する方法はありますか?

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

2 に答える 2

4

これは私が思いつくことができる限り解決策に近いです。

@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; }
于 2013-01-15T01:33:12.297 に答える
1

ドキュメントを読みましたか？Selector Control セクションでは、これについて説明します。

@import 'sprites/*.png';

.sprites-left {
  &:hover, &.active { @include sprites-sprite(name_for_hover) }
  ... etc
}
于 2013-01-09T20:14:53.977 に答える