以一致的方式製作指南針訂單精靈

Question

如何以一致的方式製作指南針訂單精靈，因此我可以爲懸停狀態設置單獨的工作表？

我使用羅盤的精靈表的工具是這樣的：

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

這使一個很好的精靈表所示：{

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

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

...etc... 

但是，如果我轉了我的源精靈的懸停顏色，它reoreders生成的工作表：

.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'); 
} 

但是因爲Compass不一致，圖標在盤旋時不同。

（我知道指南針支持_hover後綴，但我寧願它產生他們像jQuery UI做。）

Answer 1

嘗試設置魔法變量：

$ui-icon-sprite-layout: 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

.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; 
}