Sprites usando bússola

Tem uma tonelada de imagens? Deixe que a bússola os sprite para você.

Use o ajudante de sprite da bússola: http://compass-style.org/reference/compass/helpers/sprites/

Exemplo

Digamos que temos algumas imagens .png em uma pasta de ícones: imagens / ícones /

Podemos transformar a bússola em uma imagem em uma imagem e usar os nomes das imagens para determinar suas posições x / y.

No exemplo a seguir, especificaremos classes para algumas imagens na pasta de ícones. Diga, comment.png e info.png .

// Create the sprite map object.
$icons = sprite-map( "images/icons/*.png" );

.icon {
    background: {
        image: $icons;
        repeat: no-repeat;
        color: transparent;
        position: 0 0;
    };
    // Comment icon
    &.comment {
        background-position: sprite-position( $icons, comment );
    }
    // Info icon
    &.info {
        background-position: sprite-position( $icons, info );
    }
}

O css agitado é algo como:

.icon {
    background-image: url( 'images/icons-84958922.png' );
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: 0 0;
}

.icon.comment {
    background-position: 0px 0px;
}

.icon.info {
    background-position: 40px 0px;
}

Eu criei valores fictícios para as posições. Espero que você tenha entendido.

Você também pode deslocar as posições passando parâmetros adicionais:

.icon {
    ....
    .comment{
        background-position: sprite-map( $icons, comment, 2px, 0 );
    }
}

Acontece que:

.icon.comment{
    background-position: 42px 0px;
}