나침반 : 주어진 선택기에 대해 스프라이트 생성

Question

안녕하세요 저는 스프라이트를 생성하기 위해 나침반 (기본 엔진)을 사용하고 있습니다. 여기에 내가 그것을

header.top-header .back-icon a { 
    background-position: 0 -787px; 
} 
header.top-header .menu-icon a { 
    background-position: 0 -931px; 
} 

를 생성하는 것입니다 바라고 내가

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

header.top-header { 
    .back-icon a { 
     @include icons-sprites(arrow-left-white); 
    } 
    .menu-icon a { 
     @include icons-sprites(list-white); 
    } 
} 

을 쓴 SCSS는 대신, 내가 가지고 내가 배경 위치를 배치하는 나침반에 대해 구성해야합니까이

header.top-header .back-icon a .icons-arrow-left-white { 
    background-position: 0 -787px; 
} 
header.top-header .menu-icon a .icons-list-white { 
    background-position: 0 -931px; 
} 

내가 원하는대로?

Answer 1

@import "compass/utilities/sprites"; 

//where you generate sprite 
$icons: sprite-map("icons/*.png"); 

//add generated image sprite to .icons class 
.icons{ 
    background: $icons; 
} 

header.top-header { 
    .back-icon a { 
    background-position: sprite-position($icons, arrow-left-white); 
    } 
    .menu-icon a { 
    background-position: sprite-position($icons, list-white); 
    } 
} 

자세한 내용은 여기에서 찾을 수 있습니다 http://compass-style.org/reference/compass/helpers/sprites/