Spriterze kompasu generujące zbyt dużo klas CSS

Question

Używam kompasu do generowania obrazów sprite. I mam WIELU ikon sprite'ów i generuje zbyt dużo kodu CSS (zbyt wiele selektorów klas dla obrazu tła). Tak więc zaczynamy analizować kod kompas sprite:

jak widać tutaj http://compass-style.org/help/tutorials/spriting/

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

będzie generować:

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

Jeśli widzisz używam w ten sposób: <div class="my-icons-sprite my-icons-delete"></div>

chcę Kompas do wygenerowania tego kodu:

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

Znowu każdy nowy obraz, doda go do tła i położenia tła. Powodując zbyt wiele selektorów.

Czy istnieje konfiguracja?

Dzięki

Answer 1

Czy wypróbowałeś ten fragment dla Compass?

$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); 
    } 
} 

Ten przykład używa <i></i> -tag z klasy zawierającej prefiks icn- w połączeniu z nazwą pliku jednostkowego .png-plików w folderze-ikony. Tak:

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

Wygenerowany CSS wygląda następująco:

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 
} 
... 
.. 
. 

Mimo to, nie dość zorientowali się, jak to wykorzystać w połączeniu z Compass' Magic Selectors.

Selektory magiczne działają bardzo dobrze, gdy potrzebujesz różnych stanów (: hover,: active,: target). Wszystko, co musisz zrobić, to nazwać swoje pliki w następujący sposób: filename_state.png (delete_hover.png, delete_active.png itd.). Compass 'Magic Selectors automatycznie generuje css dla: hover,: active i: target (delete: hover, delete_hover i delete-hover). W ten sposób możesz swobodnie wybierać sposób, w jaki reprezentujesz zmianę stanu.

Jeśli, w moim pierwszym przykładzie, ma nazwy plików z Postfix do aktywowania/stanów czynnych fragment CSS tylko pisze tak:

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

naprawdę chciałbym mieć go wydrukować to:

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

podobnie jak tradycyjne Compass' Magic Selectors robi. Dowolny pomysł?

Answer 2

Moim zdaniem, wydaje się najlepsze z obu światów (mniej HTML i CSS) byłoby mieć ten kod (przy użyciu selektora atrybutu dla obrazu):

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

Niestety, nie wiem, jak przekonać Compass do eksportu w ten sposób. Jednakże, chyba że używasz kompasu dynamicznie, a nie tylko do budowania statycznych css z tyłu, możesz go zmienić po wygenerowaniu.

Answer 3

Co jest nie tak z bieżącym wyjściem? Możesz już przypisać moje-ikony-usuń/edytuj/nowe/zapisz tylko, to jest wystarczająco znaczące - już mówi, że to ikona i jest to ikona usuwania.

Answer 4

Dla każdego, kto szuka odpowiedzi na pytanie ScottS. Jak mogę użyć selektora CSS dla wszystkiego począwszy od klasy bazowej

Spróbuj tego: http://codepen.io/Acts7/pen/nwsEb

jestem wklejając poniższy kod.

wstawka spriteGen wymaga dwóch parametrów 1) klasy bazowej, której chcesz użyć (w przypadku Scotts --- „myicons” 2) drugi parametr to lokalizacja folderu

DONT także zapomnieć „” przed # {$ mySpriteBaseClass}. przeciwnym razie można dostać >> myicons-home_icon {background-position: ...} (. Zawiadomienia nie dla selektora nazwa klasy)

// _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

To co mam aktualnie robi, wymaga Sass 3.3 choć:

$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); 
     } 
    } 

} 

Używam BEM tu więc zakłada będziesz korzystać z tego jak <i class="icon icon--star></i>, więc jeśli jeśli masz „star.png” i „star_hover.png” obrazy będą generować .icon--star i .icon--star:hover klasę nazwy.