SASS/Compass에서 스프라이트 센터링

Question

나침반 스프라이트를 사용하여 가로로 스프라이트를 가운데에 배치하는 데 문제가 있습니다.

나는 다양한 크기의 아이콘이있는 스프라이트를 가지고 있으며, 그들이있는 컨테이너에 가운데 놓 이도록하고 싶습니다. 그래서 그들은 예를 들어 왼쪽 아이콘입니다.

나는이 할 경우

$sprite-position: 50%; 
@import "sprite/*.png"; 

를 다음 이미지가 생성 sprite.png에 집중되어 있지만, CSS는 실제로 같은 것입니다 : 오히려 예상보다

background-position: -9px -223px; 

:

background-position: 50% -223px; 

스프라이트에 위치를 지정하는 위치가 구체적으로 무엇인지는 무엇입니까? 그런 식으로 알았지? 지금은 50 %로 하드 코딩하고 Y 축은 싫어합니다. 왜냐하면 새로운 스프라이트를 추가 할 때 모든 것을 완전히 바꿔서 목적을 완전히 없애야하기 때문입니다.

컴퍼스, CSS에서이 작업을 잘못하고 있습니까? 그렇지 않으면 정상적으로 작동하지 않습니까? 이 작업을 완료 할 수있는 유일한 방법은 치수를 지정한 다음 아이콘을 포함시키고 그 안에 센터를 배치하는 것입니다. 50 %의 왼쪽 가치가 있지만 그렇게 할 필요는 없습니다 ... 맞습니까?

그냥 메모 ... 나침반은 JPEG 스프라이트도 지원하지 않습니다 .- 앞 페이지에 약 6 장의 홍보 이미지가 있습니다. 대체 할 수있는 부분이 위로 나올 정도로 좋을 것입니다. 폴더 및 그 정렬 된 이미지! 내가 바로 당신을 얻고 경우

감사합니다, 돔

Answer 1

귀하의 질문에 stubmled. 나는 당신의 요지를 얻었고 똑같은 문제가있었습니다. 나는 또한 일반적인 해결책을 찾으려고 노력했다. 그러나 그것은 가능한 현금이 아닌 것 같습니다.

의 나 position offset option 작품

, 그러나 당신이 각 스프라이트에 적용 할 필요가 완벽한 원인이 아니다 : 이것은 수평 값을 덮어하지만 수직 값을 유지한다

@import "socialmedia/*.png"; 

a.twitter { 
    @include socialmedia-sprite("twitter"); 
    @include socialmedia-sprite-position("twitter", 50%); 
} 

a.facebook { 
    @include socialmedia-sprite("facebook"); 
    @include socialmedia-sprite-position("facebook", 50%); 
} 

.

내가 말했듯이, 완벽하지는 않지만 많은 양의 어리 석음을 조정할 필요가없는 경우 작동합니다. 그래도 믹스 인을 쓸 수 있어요. 하지만 컴퍼스 자체가 그러한 옵션을 제공한다면 여전히 좋을 것입니다.

Answer 2

그냥 확인 : 당신은 당신이 중심하려는 모든 아이콘 스프라이트를 만들었습니다. 스프라이트 내에서 모든 아이콘이 가운데에 배치되므로 x : 50 %와 y 값에 따라 사용할 수 있습니다. 맞습니까?

나침반 세트의 배경 위치가 잘못되었으므로 다른 방법을 사용할 수 있습니다. 적어도 그것은 내가 한 일이다. IE6/7을 지원할 필요가 없다면 다음과 같이 인라인 데이터 함수를 사용할 수 있습니다 : http://compass-style.org/reference/compass/helpers/inline-data/

이렇게하면 스프라이트의 주 목적 인 HTTP 요청을 줄일 수 있지만 동시에 정상적인 이미지가주는 이점.

스마트 믹스를 만드는 경우 매우 편리합니다. 스프라이트보다 훨씬 똑똑합니다.

Answer 3

나는 동일한 문제가있었습니다.수평 스프라이트를 세로 중심에 배치하고 싶습니다 (예 : 인라인 요소에서 after :를 사용하여 아이콘 만들기).

@function _sprite-position-nth($map, $sprite, $n) { 
    $positions: sprite-position($map, $sprite); 
    @return nth($positions, $n); 
} 

@function sprite-position-x($map, $sprite) { 
    @return _sprite-position-nth($map, $sprite, 1); 
} 

@function sprite-position-y($map, $sprite) { 
    @return _sprite-position-nth($map, $sprite, 2); 
} 

사용 예제 :

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

a.arrow:after { 
    background: $icons sprite-position-x($icons, arrow-right) 50%; 
    //... 
} 

내가 도움이 될 희망 불행하게도 나침반 그래서 나는 이러한 기능을 만들어 50 픽셀 내 50 %를 변환.