Compassスプライトが多すぎるCSSクラスを生成しています

Question

コンパスを使用してスプライトイメージを生成しています。私はたくさんのスプライトアイコンを持っていて、あまりにも多くのCSSコードを生成しています（背景イメージ用のクラスセレクタが多すぎます）。私が欲しい<div class="my-icons-sprite my-icons-delete"></div>

：あなたは、私はこの方法を使用して表示された場合

.my-icons-sprite, 
.my-icons-delete, 
.my-icons-edit, 
.my-icons-new, 
.my-icons-save { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; } 

.my-icons-delete { background-position: 0 0; } 
.my-icons-edit { background-position: 0 -32px; } 
.my-icons-new { background-position: 0 -64px; } 
.my-icons-save { background-position: 0 -96px; } 

：あなたはhttp://compass-style.org/help/tutorials/spriting/

@import "my-icons/*.png"; 
@include all-my-icons-sprites; 

が生成されます。ここに見ることができるよう

：だからコンパススプライトコードを分析することができますこのコードを生成するコンパス：

.my-icons-sprite { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; } 

.my-icons-delete { background-position: 0 0; } 
.my-icons-edit { background-position: 0 -32px; } 
.my-icons-new { background-position: 0 -64px; } 
.my-icons-save { background-position: 0 -96px; } 

新しい画像を削除すると、背景と背景の位置が追加されます。セレクタが多すぎます。

設定がありますか？両方の世界（以下HTMLとCSS）の最高は、（画像の属性セレクタを使用して）このコードを持っていることであろうように私の意見では

Answer 1

コンパスのこのスニペットを試しましたか？

$icons: sprite-map("icons/*.png"); 

i{ 
    background: $icons; 
    display: inline-block; // or block 
} 

@each $i in sprite_names($icons){ 
    .icn-#{$i}{ 
     background-position: sprite-position($icons, $i); 
     @include sprite-dimensions($icons, $i); 
    } 
} 

この例では、アイコンフォルダ内の個別の.png - ファイルのファイル名と組み合わせプレフィックスicn-を含むクラスで<i></i> - タグを使用しています。このように：

<i class="icn-delete"></i> 

生成されたCSSは次のようになります。

i { 
    background: url('/path/to/generated/spritemap/my-icons-xxxxxxxxxxx.png'); 
    display: inline-block; 
} 
.icn-delete { 
    background-position: 0 0; 
    height: 32px; // assuming the width is 32px 
    width: 32px; // assuming the height is 32px 
} 
.icn-edit{ 
    background-position: 0 -32px; 
    height: 32px; // assuming the width is 32px 
    width: 32px; // assuming the height is 32px 
} 
.icn-new { 
    background-position: 0 -64px; 
    height: 32px; // assuming the width is 32px 
    width: 32px; // assuming the height is 32px 
} 
... 
.. 
. 

はそれでも、私はかなりCompass' Magic Selectorsとの組み合わせで、これを使用する方法を考え出したていません。

マジックセレクタは、さまざまな状態（：ホバー、：アクティブ、：ターゲット）が必要なときに非常に便利です。あなたのファイルには、filename_state.png（delete_hover.png、delete_active.pngなど）のような名前を付けるだけです。 Compass 'Magic Selectorsは、ホバー、：アクティブ、：ターゲット（削除：ホバー、ホールド、削除、ホバー削除）のCSSを自動的に生成します。このようにして、国家の変化をどのように表現するかを自由に選択できます。

あなたは、私の最初の例では、ホバー/アクティブ状態のための接尾辞を持つファイル名を持っている場合は、スニペットはこれだけのようにCSSを書き込みます：

.icn-edit_hover { 
    background-position: -32px -32px; 
    height: 32px; 
    width: 32px; 
} 

私は本当にそれがこれを印刷したいのですが：

.icn-edit:hover, .icn-edit_hover, .icn-edit-hover{ 
    background-position: 0 -32px; 
    height: 32px; 
    width: 32px; 
} 

従来のようにCompass' Magic Selectorsします。何か案が？

Answer 2

おかげで、それはそうです：

HTML

<div class="my-icons-delete"></div> 

CSS

[class^="my-icons-"] { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; } 

.my-icons-delete { background-position: 0 0; } 
.my-icons-edit { background-position: 0 -32px; } 
.my-icons-new { background-position: 0 -64px; } 
.my-icons-save { background-position: 0 -96px; } 

残念ながら、コンパスにそのようにエクスポートする方法はわかりません。しかし、バックエンドの静的CSSを構築するのではなく、Compassを動的に使用している場合を除き、生成した静的CSSを変更するだけで済みます。

Answer 3

現在の出力で何が問題になっていますか？ あなたはすでにmy-icons-delete/edit/new/saveだけを割り当てることができます。これは意味が十分です。アイコンと削除アイコンです。

Answer 4

ScottSの質問に対する回答をお探しの方にお勧めします。私は以下のコードを貼り付けてい http://codepen.io/Acts7/pen/nwsEb

： は、どのように私はこれを試してみてください基底クラス

始まる何のためにCSSセレクタを使用することができます。

が

spriteGenのミックスインは、二つのパラメータ 1）あなたはスコッツケースに（使用する基底クラスを必要とする---「myicons」 2）2番目のパラメータは

はまた、忘れてはいけないフォルダの場所です「」 ＃{$ mySpriteBaseClass}の前。 は、そうでない場合は、あなたが得る>> myicons-home_icon {のbackground-position：...} （。予告なくクラス名セレクタのために）これは私が現在やっているものです

は

// _custom.scss 
// --------------------------------------------------------- 
// Sprite Generation 
    --------------------- */ 
    @include spriteGen('sprites','sprites'); 

// _mixins.scss 
// --------------------------------------------------------- 
// Sprite Generation Mixin with options 
@mixin spriteGen($mySpriteBaseClass:'.spritebc',$mySpriteFolder:'sprites'){ 
    $mySprites:$mySpriteFolder + "/*.png"; 
    $spritefoldername-map: sprite-map($mySprites, 
     $spacing: 10px, 
     $layout: vertical 
    ); 
    // if using base class as starter for sprite name class 
    [class^="#{$mySpriteBaseClass}"]{ 
    /*// if using a separate base class 
    .#{$mySpriteBaseClass}{*/ 
     //  TODO: 
     //  Add if/else to set width globally 
     //  or let spriting assign it per each 
     //width: 48px; 
     //height: 48px; 
     display: inline-block; 
     vertical-align: middle; 
     background: $spritefoldername-map no-repeat; 
    } 

    @each $sprite in sprite_names($spritefoldername-map) { 
     // if using sprite base class as prefix to full sprite class name 
     .#{$mySpriteBaseClass}-#{$sprite} { 
     /*// if using separate base class and sprite name class 
     .#{$sprite} {*/ 
      background-position: sprite-position($spritefoldername-map, $sprite); 
      @include sprite-dimensions($spritefoldername-map, $sprite); 
     } 
    } 
} 

Answer 5

、それはしかしサス3.3が必要です。それはあなたが「star.png」と「star_hover.png」の画像を持っている場合、それは.icon--starと.icon--star:hoverクラスを生成しますので、もしあなたが、<i class="icon icon--star></i>のようにこれを使用しますと仮定して、私はここにBEMを使用してい

$icons: sprite-map('icons/*.png'); 

.icon { 
    background: $icons; 
    display: inline-block; 
    vertical-align: middle; 
} 

@each $i in sprite_names($icons) { 

    $underscore: str-index($i, _); 

    @if ($underscore < 1) { 
     .icon--#{$i} { 
      background-position: sprite-position($icons, $i); 
      @include sprite-dimensions($icons, $i); 
     } 
    } @else { 
     $prefix: str-slice($i, 0, $underscore - 1); 
     $postfix: str-slice($i, $underscore + 1); 

     .icon--#{$prefix}:#{$postfix} { 
      background-position: sprite-position($icons, $i); 
     } 
    } 

} 

名前。