일관된 방식으로 컴퍼스 순서 스프라이트 만들기

Question

컴퍼스 순서 스프라이트를 일관된 방식으로 만들려면 어떻게해야합니까? 그러면 호버 상태에 대해 별도의 시트를 만들 수 있습니까?

I는 다음과 같이 나침반의 스프라이트 시트 도구를 사용하고 있습니다 :

멋진 스프라이트 시트와 같은 수

@import "ui-icon/*.png"; 
@include all-ui-icon-sprites; 

: {

.ui-icon-add { 
    background-position: 0 -5344px; } 

.ui-icon-alert { 
    background-position: 0 -2352px; } 

...etc... 

을하지만 호버 내 소스 스프라이트를 전환하는 경우 색상을 사용하면 생성 된 시트가 다시 열립니다.

.ui-icon-add { 
    background-position: 0 -5376px; } 

.ui-icon-alert { 
    background-position: 0 -2320px; } 

...etc... 

다음과 같은 호버 상태를 사용하고 있습니다 (f jQuery UI) :

.ui-icon { 
    width: 16px; 
    height: 16px; 
    display: block; 
    background-image: url('ui-icons.png'); 
} 

.ui-state-hover .ui-icon { 
    background-image: url('ui-icons-hover.png'); 
} 

하지만 나침반이 일관성이 없기 때문에 마우스를 가져갈 때 아이콘이 달라집니다.

(I 나침반이 _hover 접미사를 지원 알지만, jQuery를 UI가하는 것처럼 훨씬 오히려 그들을 생성합니다.)

Answer 1

마법 변수를 설정하십시오 : 모두에게

$ui-icon-sprite-layout: horizontal; 

당신의 아이콘 스프라이트. 필자의 경험에 따르면 horizontal은 매번 동일한 순서로 동일한 아이콘을 가진 두 개의 스프라이트를 생성하는 유일한 레이아웃 모드입니다.

는 GitHub의에이 나침반 문제를 참조하십시오 : https://github.com/chriseppstein/compass/issues/690

Answer 2

당신은 당신의 매핑 당신이 원하는 방식을 만들려면 @each 루프를 사용할 수 있습니다. 단점은 sprite 및 hover-sprite의 명명 규칙을 따르고 $icons 변수를 수동으로 편집해야한다는 것입니다.

는

디렉토리 구조

├── ui-icon 
│   ├── add.png 
│   ├── alert.png 
│   ├── hover-add.png 
│   └── hover-alert.png 
└── ui-icon-s38eb55a811.png 

SCSS는

import "compass/utilities/sprites"; 

@import "ui-icon/*.png"; 
$icons: add alert; 

    @each $icon in $icons { 
    .ui-icon-#{$icon} { 
     @include ui-icon-sprite($icon); 
    } 
    .ui-icon-hover-#{$icon}{ 
     @include ui-icon-sprite("hover-" + $icon) 
    } 
} 

CSS 수동으로`$ icons` 변수를 편집

.ui-icon-add { 
    background-position: 0 0; 
} 

.ui-icon-hover-add { 
    background-position: 0 -64px; 
} 

.ui-icon-alert { 
    background-position: 0 -32px; 
} 

.ui-icon-hover-alert { 
    background-position: 0 -96px; 
}