La posizione dello sfondo della bussola sprite non è come la voglio io

Question

Sono al primo utilizzo di Compass. Volevo avere immagini di icone (tutte in dimensioni leggermente diverse) in posizione centrale. come l'immagine allegata

sto usando questa impostazione

$icons-spacing:40px; 
@import "icons/*.png"; 
@include all-icons-sprites; 

il css sto ottenendo è (per esempio)

.icons-adventure { 
    background-position: 0 -608px; 
} 

Non è che come ho richiesto . Voglio dare più spazio tra l'alto e il sinistro.

Answer 1

$icons-spacing definisce il numero di pixel che separa ogni immagine nella mappa sprite generata. Credo che si vuole regolare la $icons-position che regola (offset) le generate background-position stili

Answer 2

Prima di tutto, una buona domanda ...

Quando si dà sprite in CSS, si sarà in grado di generare le classi con il .image-name. Ed è così che funzionano gli sprite della bussola. La tua immagine verrà aggiunta ad una grande immagine sprite e tutte le immagini irregolari saranno randellate insieme in una griglia.

Anche se $icons-spacing ti dà la possibilità di dare un po 'di padding alla griglia, non sarà così facile per te metterlo in questo caso. Quindi, andando avanti con ciò che viene generato, faremo quanto segue.

Quindi, se si desidera qualcosa come l'immagine, è necessario centrare l'elemento, che ha la classe generata da Compass.

Ora dire, avete adventure.png in esso e che ha generato questa classe:

.icons-adventure { 
    background-position: 0 -608px; 
} 

Ora, se si vuole fare questo centrato, si può fare in questo modo.

<div class="border"> 
    <i class="icons-adventure"></i> 
</div> 

E per la classe border, dare padding. Quindi, quello che intendo qui è che hai avvolto lo .border sullo .icons-adventure. Ora, devi dare un po 'di imbottitura e larghezza.

.border {padding: 15px; width: 40px;} 

Qui, non c'è bisogno di altezza, poiché l'altezza è automaticamente presa in considerazione. Fammi venire con un violino perché tu possa avere una spiegazione chiara.

Answer 3

Si consiglia di controllare questo Github Gist: https://gist.github.com/adamlogic/3577147, che mi ha aiutato a risolvere i problemi di sprite in passato e anche una migliore comprensione di come funziona lo sprite in Bussola.

Di particolare interesse per voi può essere la parte in cui l'autore cita il seguente: (incollato qui nel caso in cui viene rimossa la Gist)

"Ho preso questa un po 'più definendo la mia (sprite) mixin."

$spritemap-spacing: 50px 
@import "spritemap/*.png" 

=background-sprite($name, $repeat: no-repeat, $offset-x: 0, $offset-y: 0) 
    background-image: $spritemap-sprites 
    background-repeat: $repeat 
    +sprite-background-position($spritemap-sprites, $name, $offset-x, $offset-y) 

    // if no offsets given, set the dimensions of the element to match the image 
    @if $offset-x == 0 and $offset-y == 0 
    +sprite-dimensions($spritemap-sprites, $name) 

"e come lo sto usando"

// simplest case; sets the background image and dimensions of the element 
h3 
    +background-sprite(ribbonfull) 

// custom offset; does not set the dimensions of the element 
h2 
    +background-sprite(ribbonend, no-repeat, 3px, 22px) 

// repeating backgrounds are possible, too 
#positions 
    +background-sprite(doubleline, repeat-x, 0, 45px) 

E, CSS generato dell'autore:

h3 { 
    background-image: url('/images/spritemap-sb826ca2aba.png'); 
    background-repeat: no-repeat; 
    background-position: 0 -405px; 
    height: 29px; 
    width: 295px; } 

h2 { 
    background-image: url('/images/spritemap-sb826ca2aba.png'); 
    background-repeat: no-repeat; 
    background-position: 3px -296px; } 

#positions { 
    background-image: url('/images/spritemap-sb826ca2aba.png'); 
    background-repeat: repeat-x; 
    background-position: 0 -751px; } 

Answer 4

ho trovato due soluzioni per questo problema, entrambi non perfetti:

1. Puoi semplicemente salvare l'icona nell'editor di immagini con il padding necessario: funziona se vuoi usarlo solo in un posto, altrimenti devi creare duplicati (motivo per cui questo non funziona sempre) .
2. Un'altra soluzione è usare pseudoelementi. Supponendo che è l'elemento che si desidera aggiungere il contesto e si sono collocati i icone icone delle cartelle:

@import "icons/*.png"; 

el { 
    position: relative; 
} 

el:after { 
    content: ""; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    @include icons-sprite(some_icon); 
    margin-top: - round(icons-sprite-height(some_icon)/2); 
    margin-left: - round(icons-sprite-width(some_icon)/2);  
} 

Answer 5

Se si conosce la dimensione della vostra icona è possibile impostare l'altezza di default per tutte le icone e danno singole icone un offset verticale di (default altezza - altezza icona)/2 e la posizione orizzontale con il centro:

$sprite-spacing: 50px; 
@import "compass/utilities/sprites"; 
@import "sprite/*.png"; 
@include all-sprite-sprites; 
$sprite: sprite-map("sprite/*.png", $spacing: 50px); 

@include sprite-sprite(myicon); 
@include sprite-background-position($sprite, myicon, center, 12px); 

Answer 6

Se si utilizza Bootstrap 3 basta utilizzare il codice riportato di seguito, la sua semplice e pulito,

SASS File

@import "compass"; 
$home-spacing : 10px; 
$home-sprite-dimensions : true; 
@import "web/images/home/*.png"; 
@include all-home-sprites; 

E in HTML/File Slim mi basta usare il center-block fornito da Twitter Bootstrap 3, il mio aiuto HTML,

=content_tag('div','',:class=>'home-save_money center-block') 

In sostanza è solo centrare allineare le immagini in il centro del div, tutta la risposta sopra usa alcuni Mixin personalizzati o un hack.

PS: Anche se non usare Twitter bootstrap, basta usare il seguente CSS, che farebbe il trucco,

display: block; 
margin-left: auto; 
margin-right: auto; 

Spero che questo aiuta qualcuno,