2

コンパス オーダー スプライトを一貫した方法で作成し、ホバー状態用に別のシートを作成するにはどうすればよいですか?

Compass のスプライト シート ツールを次のように使用しています。

@import "ui-icon/*.png";
@include all-ui-icon-sprites;

これにより、次のような素敵なスプライト シートが作成されます。{

.ui-icon-add {
  background-position: 0 -5344px; }

.ui-icon-alert {
  background-position: 0 -2352px; }

...etc...

しかし、ソース スプライトをホバー カラーに切り替えると、生成されたシートが再配列されます。

.ui-icon-add {
  background-position: 0 -5376px; }

.ui-icon-alert {
  background-position: 0 -2320px; }

...etc...

私はこのようなホバー状態を使用しています(jQuery UIに基づいています):

.ui-icon {
    width: 16px;
    height: 16px;
    display: block;
    background-image: url('ui-icons.png');
}

.ui-state-hover .ui-icon {
    background-image: url('ui-icons-hover.png');
}

しかし、コンパスには一貫性がないため、ホバーしたときのアイコンは異なります。

(コンパスがサフィックスをサポートしていることは知ってい_hoverますが、jQuery UI のようにサフィックスを生成したいと思います。)

4

2 に答える 2

1

魔法の変数を設定してみてください：

$ui-icon-sprite-layout: horizontal;

両方のアイコンスプライト用。私の経験では、水平は、毎回同じ順序で同じアイコンを持つ2つのスプライトを生成する唯一のレイアウトモードです。

GitHubのこのコンパスの問題も参照してください：https ：//github.com/chriseppstein/compass/issues/690

于 2013-02-27T18:57:59.713 に答える
0

ループを使用し@eachて、必要な方法でマッピングを作成できます。欠点は、変数を手動で編集するだけでなく、spriteとの命名規則に従う必要があることです。hover-sprite$icons

ディレクトリ構造

├── ui-icon
│   ├── add.png
│   ├── alert.png
│   ├── hover-add.png
│   └── hover-alert.png
└── ui-icon-s38eb55a811.png

SCSS

import "compass/utilities/sprites";

@import "ui-icon/*.png";
$icons:   add alert;

  @each $icon in $icons {
    .ui-icon-#{$icon} {
      @include ui-icon-sprite($icon);
    }
    .ui-icon-hover-#{$icon}{
      @include ui-icon-sprite("hover-" + $icon)
    }
}

CSS

.ui-icon-add {
  background-position: 0 0;
}

.ui-icon-hover-add {
  background-position: 0 -64px;
}

.ui-icon-alert {
  background-position: 0 -32px;
}

.ui-icon-hover-alert {
  background-position: 0 -96px;
}
于 2013-02-27T19:10:11.050 に答える