Compass sprite generates too many CSS classes

Question

I use a compass to create sprites. And I have many sprite icons, and it generates too much CSS code (too many class selectors for the background image). So let's analyze the compass sprite code:

as you can see here http://compass-style.org/help/tutorials/spriting/

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

Will generate:

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

If you see that I am using this method: <div class="my-icons-sprite my-icons-delete"></div>

I want Compass to generate this code:

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

Repeat each new image, it will add for background and background. Causes too many selectors.

Is there any configuration for this?

thanks

Answer 1

Have you tried this compass snippet?

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

This example uses <i></i> -tag with a class containing the icn- prefix in combination with the file name of the individual .png files in the icons folder. Like this:

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

The generated CSS looks like this:

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

However, I did not quite understand how to use this in conjunction with the compass Magic Selectors .

Magic Selectors works very well when you need different states (: hover ,: active ,: target). All you have to do is name your files as follows: filename_state.png (delete_hover.png, delete_active.png, etc.). Then, "Compass Magic Selectors" automatically generate css for: hover ,: active and: target (delete: hover, delete_hover and delete-hover). This way you can freely choose how you will represent the state change.

If in the first example you have postfix file names for freezes / active states, the fragment only writes CSS as follows:

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

I would really like this to print this:

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

like the traditional Magic Selectors compass . Any idea?

Answer 2

In my opinion, it seems that the best of both worlds (less HTML and CSS) will have this code (using an attribute selector for the image):

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

Unfortunately, I do not know how to get Compass to export. However, if you are not using Compass dynamically, and not just to create static css, you can simply change it after creation.

Answer 3

For those who want to answer the ScottS question. How to use css selector for anything starting from base class

Try the following: http://codepen.io/Acts7/pen/nwsEb

I am inserting the code below.

spriteGen mix requires two parameters 1) the base class that you want to use (in the case of ScottS --- "myicons" 2) the second parameter is the location of the folder

And don't forget the ".". before # {$ mySpriteBaseClass}. Otherwise, you will get → myicons-home_icon {background-position: ...} (notification number for the class name selector)

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

What happened to the current release? You can already assign my-icons-delete / edit / new / save, this is quite semantic - it already speaks of the delete icon and icon.

Answer 5

This is what I am doing now, it requires Sass 3.3:

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

I use BEM here, so it assumes that you will use it as <i class="icon icon--star></i> , so if you have images" star.png "and" star_hover.png " will generate .icon--star and .icon--star:hover class names.